ng-prime-tools 1.0.73 → 1.0.75

package/fesm2022/ng-prime-tools.mjs

@@ -3,7 +3,7 @@ import { Pipe, EventEmitter, ViewChild, Output, Input, Component, NgModule, Inje
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i1$1 from 'primeng/api';
@@ -41,6 +41,8 @@ import * as i3$3 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import * as i3$4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
+import * as i6$1 from 'primeng/password';
+import { PasswordModule } from 'primeng/password';
 import * as i3$5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { Chart, registerables } from 'chart.js';
@@ -1125,11 +1127,11 @@ class PTAdvancedPrimeTableComponent {
         return [value];
     }
     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:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::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" }, 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" }] }); }
 }
 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:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::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      @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"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -1198,43 +1200,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 class PTMultiSelectComponent {
+    constructor() {
+        /**
+         * Two-way standalone value.
+         */
+        this.value = [];
+        this.valueChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.standaloneFormGroup = new FormGroup({});
+    }
     ngOnInit() {
-        this.setupControl();
+        this.setupControl(true);
     }
     ngOnChanges(changes) {
-        if (changes['formField'] && !changes['formField'].firstChange) {
-            this.setupControl();
+        if (changes['formGroup'] ||
+            changes['formField'] ||
+            changes['config'] ||
+            changes['value']) {
+            this.setupControl(false);
         }
     }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    get activeFormGroup() {
+        return this.formGroup || this.standaloneFormGroup;
+    }
+    get controlName() {
+        return this.formField?.name || this.config?.name || 'multiSelect';
+    }
     get inputId() {
-        return `pt-multiselect-${this.formField?.name || 'field'}`;
+        return `pt-multiselect-${this.controlName}`;
     }
-    setupControl() {
-        const name = this.formField?.name;
-        if (!name || !this.formGroup) {
+    get resolvedHidden() {
+        return this.formField?.hidden ?? this.config?.hidden ?? false;
+    }
+    get resolvedLabel() {
+        return this.formField?.label || this.config?.label;
+    }
+    get resolvedWidth() {
+        return this.formField?.width || this.config?.width || '100%';
+    }
+    get resolvedOptions() {
+        return this.formField?.options || this.config?.options || [];
+    }
+    get resolvedPlaceholder() {
+        return (this.formField?.placeholder ||
+            this.config?.placeholder ||
+            'Select options');
+    }
+    get resolvedOptionLabel() {
+        return this.config?.optionLabel || 'label';
+    }
+    get resolvedOptionValue() {
+        return this.config?.optionValue || 'value';
+    }
+    get resolvedRequired() {
+        return this.formField?.required ?? this.config?.required ?? false;
+    }
+    get resolvedDisabled() {
+        return this.formField?.disabled ?? this.config?.disabled ?? false;
+    }
+    get resolvedErrorText() {
+        return this.formField?.errorText || this.config?.errorText;
+    }
+    get resolvedFilter() {
+        return this.config?.filter === true;
+    }
+    get resolvedFilterBy() {
+        return this.config?.filterBy || this.resolvedOptionLabel;
+    }
+    get resolvedDisplay() {
+        return this.config?.display || 'comma';
+    }
+    get resolvedMaxSelectedLabels() {
+        return this.config?.maxSelectedLabels ?? 3;
+    }
+    get resolvedSelectedItemsLabel() {
+        return this.config?.selectedItemsLabel || '{0} items selected';
+    }
+    setupControl(forceValueFromConfig) {
+        const name = this.controlName;
+        if (!name) {
             return;
         }
-        let control = this.formGroup.get(name);
-        const normalizedValue = this.normalizeValue(this.formField?.value);
+        let control = this.activeFormGroup.get(name);
         if (!control) {
-            control = new FormControl(normalizedValue);
-            this.formGroup.addControl(name, control);
+            control = new FormControl(this.getInitialValue());
+            this.activeFormGroup.addControl(name, control);
         }
-        else {
-            control.setValue(normalizedValue, { emitEvent: false });
+        else if (forceValueFromConfig) {
+            control.setValue(this.getInitialValue(), { emitEvent: false });
+        }
+        else if (!this.formGroup && this.value !== undefined) {
+            control.setValue(this.normalizeValue(this.value), { emitEvent: false });
         }
         control.setValidators(this.getValidators());
-        if (this.formField?.disabled) {
+        if (this.resolvedDisabled) {
             control.disable({ emitEvent: false });
         }
         else {
             control.enable({ emitEvent: false });
         }
         control.updateValueAndValidity({ emitEvent: false });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe((selectedValues) => {
+            const normalizedValues = this.normalizeValue(selectedValues);
+            this.valueChange.emit(normalizedValues);
+            this.selectionChange.emit(normalizedValues);
+        });
+    }
+    getInitialValue() {
+        if (this.formField?.value !== undefined) {
+            return this.normalizeValue(this.formField.value);
+        }
+        if (this.value !== undefined && Array.isArray(this.value)) {
+            return this.normalizeValue(this.value);
+        }
+        return this.normalizeValue(this.config?.value);
     }
     getValidators() {
         const validators = [];
-        if (this.formField?.required) {
+        if (this.resolvedRequired) {
             validators.push(Validators.required);
         }
         return validators;
@@ -1254,26 +1341,41 @@ class PTMultiSelectComponent {
             return value;
         }
         return value
-            .map((item) => item?.value ?? item?.id ?? null)
+            .map((item) => {
+            const optionValue = this.resolvedOptionValue;
+            if (item?.[optionValue] !== undefined) {
+                return item[optionValue];
+            }
+            return item?.value ?? item?.id ?? null;
+        })
             .filter((item) => item !== null && item !== undefined);
     }
     getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
+        const control = this.activeFormGroup.get(this.controlName);
         if (control?.hasError('required')) {
-            return this.formField.errorText || `${this.formField.label} is required`;
+            return (this.resolvedErrorText ||
+                `${this.resolvedLabel || this.controlName} is required`);
         }
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMultiSelectComponent, isStandalone: false, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [options]=\"formField.options\"\n      [placeholder]=\"formField.placeholder || 'Select options'\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      (formGroup.get(formField.name)?.touched ||\n      formGroup.get(formField.name)?.dirty)\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMultiSelectComponent, isStandalone: false, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [display]=\"resolvedDisplay\"\n      [maxSelectedLabels]=\"resolvedMaxSelectedLabels\"\n      [selectedItemsLabel]=\"resolvedSelectedItemsLabel\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-multiselect{width:100%}.form-field ::ng-deep .p-multiselect.ng-invalid.ng-touched,.form-field ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-multi-select', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [options]=\"formField.options\"\n      [placeholder]=\"formField.placeholder || 'Select options'\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      (formGroup.get(formField.name)?.touched ||\n      formGroup.get(formField.name)?.dirty)\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-multi-select', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [display]=\"resolvedDisplay\"\n      [maxSelectedLabels]=\"resolvedMaxSelectedLabels\"\n      [selectedItemsLabel]=\"resolvedSelectedItemsLabel\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-multiselect{width:100%}.form-field ::ng-deep .p-multiselect.ng-invalid.ng-touched,.form-field ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:#dc2626}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 
 class PTMultiSelectModule {
@@ -1296,7 +1398,6 @@ class PTButtonComponent {
         this.el = el;
     }
     ngOnInit() {
-        // Fallback to default config if undefined
         if (!this.buttonConfig) {
             this.buttonConfig = {
                 label: 'Click Me',
@@ -1317,87 +1418,123 @@ class PTButtonComponent {
     }
     ngOnChanges(changes) {
         const configChange = changes['buttonConfig'];
-        if (configChange) {
-            const prev = configChange.previousValue;
-            const curr = configChange.currentValue;
-            if (prev && curr) {
-                const onlyDisabledChanged = prev.disabled !== curr.disabled &&
-                    JSON.stringify({ ...prev, disabled: undefined }) ===
-                        JSON.stringify({ ...curr, disabled: undefined });
-                if (onlyDisabledChanged) {
-                    this.updateDisabledStyles(curr.disabled ?? false);
-                }
-                else {
-                    this.applyButtonStyles();
-                }
+        if (!configChange) {
+            return;
+        }
+        const prev = configChange.previousValue;
+        const curr = configChange.currentValue;
+        if (prev && curr) {
+            const onlyDisabledChanged = prev.disabled !== curr.disabled &&
+                JSON.stringify({ ...prev, disabled: undefined }) ===
+                    JSON.stringify({ ...curr, disabled: undefined });
+            if (onlyDisabledChanged) {
+                setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
             }
             else {
-                // If no previous value (first load), apply full styles
-                this.applyButtonStyles();
+                setTimeout(() => this.applyButtonStyles());
             }
+            return;
         }
+        setTimeout(() => this.applyButtonStyles());
     }
     ngAfterViewInit() {
-        this.applyButtonStyles();
+        setTimeout(() => this.applyButtonStyles());
     }
     getIconPos() {
-        return this.buttonConfig.iconPos === 'right' ? 'right' : 'left';
+        return this.buttonConfig?.iconPos === 'right' ? 'right' : 'left';
     }
     getType() {
-        return this.buttonConfig.type || 'button';
+        return this.buttonConfig?.type || 'button';
+    }
+    hasCustomColors() {
+        return !!(this.buttonConfig?.backgroundColor ||
+            this.buttonConfig?.borderColor ||
+            this.buttonConfig?.fontColor);
+    }
+    getSeverity() {
+        /**
+         * If custom colors are provided, do not pass PrimeNG severity.
+         * PrimeNG severity classes can override custom background/border colors.
+         */
+        if (this.hasCustomColors()) {
+            return undefined;
+        }
+        return this.buttonConfig?.severity;
+    }
+    getStyleClass() {
+        const classes = [];
+        if (this.buttonConfig?.styleClass) {
+            classes.push(this.buttonConfig.styleClass);
+        }
+        if (this.hasCustomColors()) {
+            classes.push('pt-custom-colored-button');
+        }
+        return classes.join(' ');
     }
     updateDisabledStyles(isDisabled) {
-        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
-        if (buttonElement) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
+        const buttonElement = this.getButtonElement();
+        if (!buttonElement || !this.buttonConfig) {
+            return;
+        }
+        if (this.hasCustomColors()) {
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            this.renderer.setStyle(buttonElement, 'background-color', isDisabled
+                ? '#e0e0e0'
+                : this.buttonConfig.backgroundColor || 'transparent');
+            this.renderer.setStyle(buttonElement, 'border-color', isDisabled
+                ? '#bdbdbd'
+                : this.buttonConfig.borderColor ||
+                    this.buttonConfig.backgroundColor ||
+                    'transparent');
+            return;
         }
+        this.renderer.removeStyle(buttonElement, 'color');
+        this.renderer.removeStyle(buttonElement, 'background-color');
+        this.renderer.removeStyle(buttonElement, 'border-color');
     }
     /**
-     * We delegate colors to PrimeNG theme when:
-     * - outlined = true
-     * - and no manual color is provided (no backgroundColor, borderColor, fontColor)
+     * We delegate colors to PrimeNG theme when no manual color is provided.
      */
     shouldUseThemeColors() {
-        if (!this.buttonConfig) {
-            return false;
-        }
-        const outlined = !!this.buttonConfig.outlined; // ✅ coerce to boolean
-        return (outlined &&
-            !this.buttonConfig.backgroundColor &&
-            !this.buttonConfig.borderColor &&
-            !this.buttonConfig.fontColor);
+        return !this.hasCustomColors();
     }
     applyButtonStyles() {
-        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
+        const buttonElement = this.getButtonElement();
         if (!buttonElement || !this.buttonConfig) {
             return;
         }
         const isDisabled = !!this.buttonConfig.disabled;
         const useThemeColors = this.shouldUseThemeColors();
-        // Width / height always applied
         this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
         this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
-        // ✅ Only override colors when we are NOT delegating to PrimeNG theme
         if (!useThemeColors) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
-        }
-        else {
-            // If we delegate to theme, clear any inline overrides
-            this.renderer.removeStyle(buttonElement, 'color');
-            this.renderer.removeStyle(buttonElement, 'background-color');
-            this.renderer.removeStyle(buttonElement, 'border-color');
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            this.renderer.setStyle(buttonElement, 'background-color', isDisabled
+                ? '#e0e0e0'
+                : this.buttonConfig.backgroundColor || 'transparent');
+            this.renderer.setStyle(buttonElement, 'border-color', isDisabled
+                ? '#bdbdbd'
+                : this.buttonConfig.borderColor ||
+                    this.buttonConfig.backgroundColor ||
+                    'transparent');
+            return;
         }
+        this.renderer.removeStyle(buttonElement, 'color');
+        this.renderer.removeStyle(buttonElement, 'background-color');
+        this.renderer.removeStyle(buttonElement, 'border-color');
+    }
+    getButtonElement() {
+        return (this.el.nativeElement.querySelector('button.p-button') ||
+            this.el.nativeElement.querySelector('button.p-element') ||
+            this.el.nativeElement.querySelector('.p-button') ||
+            this.el.nativeElement.querySelector('button'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
+            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
                 type: Input
             }] } });
@@ -1848,11 +1985,11 @@ class PTCheckBoxInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCheckBoxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCheckBoxInputComponent, isStandalone: false, selector: "pt-check-box-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    <div class=\"checkbox-container\">\n      <p-checkbox\n        [inputId]=\"inputId\"\n        [name]=\"formField.name\"\n        [formControlName]=\"formField.name\"\n        [binary]=\"true\"\n      ></p-checkbox>\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"checkbox-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n      formGroup.get(formField.name)?.dirty)\n      ) {\n      <div\n        class=\"error-container\"\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.checkbox-container{display:flex;align-items:center}.p-error{font-size:.8rem;color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCheckBoxInputComponent, isStandalone: false, selector: "pt-check-box-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"checkbox-container\">\n      <p-checkbox\n        [inputId]=\"inputId\"\n        [name]=\"formField.name\"\n        [formControlName]=\"formField.name\"\n        [binary]=\"true\"\n      ></p-checkbox>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"checkbox-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.checkbox-container .checkbox-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.checkbox-container ::ng-deep .p-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.checkbox-container ::ng-deep .p-checkbox-box{width:1.25rem;height:1.25rem}.error-container{margin-top:.25rem}.p-error{font-size:.8rem;color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCheckBoxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-check-box-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    <div class=\"checkbox-container\">\n      <p-checkbox\n        [inputId]=\"inputId\"\n        [name]=\"formField.name\"\n        [formControlName]=\"formField.name\"\n        [binary]=\"true\"\n      ></p-checkbox>\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"checkbox-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n      formGroup.get(formField.name)?.dirty)\n      ) {\n      <div\n        class=\"error-container\"\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.checkbox-container{display:flex;align-items:center}.p-error{font-size:.8rem;color:#f44336}\n"] }]
+            args: [{ selector: 'pt-check-box-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"checkbox-container\">\n      <p-checkbox\n        [inputId]=\"inputId\"\n        [name]=\"formField.name\"\n        [formControlName]=\"formField.name\"\n        [binary]=\"true\"\n      ></p-checkbox>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"checkbox-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.checkbox-container .checkbox-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.checkbox-container ::ng-deep .p-checkbox{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.checkbox-container ::ng-deep .p-checkbox-box{width:1.25rem;height:1.25rem}.error-container{margin-top:.25rem}.p-error{font-size:.8rem;color:#f44336}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -1990,79 +2127,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class PTDateInputComponent {
     constructor(dateService) {
         this.dateService = dateService;
+        /**
+         * Two-way standalone value.
+         */
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.dateChange = new EventEmitter();
         this.minDate = null;
         this.maxDate = null;
         this.defaultPlaceholder = 'Select date';
         this.defaultDateFormat = 'dd/mm/yy';
+        this.standaloneFormGroup = new FormGroup({});
     }
     ngOnInit() {
-        this.defaultDateFormat = this.dateService.assignDefaultDateFormat(this.formField.dateInputType || 'date', this.formField.dateFormat);
-        this.setupControl();
-        this.initializeDateLimits();
-        try {
-            this.dateService.validateDateFormatAndType(this.defaultDateFormat, this.formField.dateInputType || 'date', this.formField.minValue, this.formField.maxValue, this.formField.hourFormat || '24');
-        }
-        catch (error) {
-            if (error instanceof Error) {
-                console.error(error.message);
-            }
-            else {
-                console.error('An unknown error occurred.');
-            }
+        this.initializeComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes['formGroup'] ||
+            changes['formField'] ||
+            changes['config'] ||
+            changes['value']) {
+            this.initializeComponent();
         }
-        this.defaultPlaceholder = getDefaultPlaceholder(this.formField.dateInputType || 'date');
+    }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    get activeFormGroup() {
+        return this.formGroup || this.standaloneFormGroup;
+    }
+    get controlName() {
+        return this.formField?.name || this.config?.name || 'date';
     }
     get inputId() {
-        return `pt-date-${this.formField?.name || 'field'}`;
+        return `pt-date-${this.controlName}`;
+    }
+    get resolvedHidden() {
+        return this.formField?.hidden ?? this.config?.hidden ?? false;
+    }
+    get resolvedLabel() {
+        return this.formField?.label || this.config?.label;
+    }
+    get resolvedWidth() {
+        return this.formField?.width || this.config?.width || '100%';
+    }
+    get resolvedPlaceholder() {
+        return (this.formField?.placeholder ||
+            this.config?.placeholder ||
+            this.defaultPlaceholder);
+    }
+    get resolvedDateInputType() {
+        return (this.formField?.dateInputType ||
+            this.config?.dateInputType ||
+            'date');
+    }
+    get resolvedDateFormat() {
+        return (this.formField?.dateFormat ||
+            this.config?.dateFormat ||
+            this.defaultDateFormat);
+    }
+    get resolvedHourFormat() {
+        return (this.formField?.hourFormat ||
+            this.config?.hourFormat ||
+            '24');
+    }
+    get resolvedRequired() {
+        return this.formField?.required ?? this.config?.required ?? false;
+    }
+    get resolvedDisabled() {
+        return this.formField?.disabled ?? this.config?.disabled ?? false;
+    }
+    get resolvedShowIcon() {
+        return this.config?.showIcon ?? true;
+    }
+    get resolvedMinValue() {
+        return this.formField?.minValue || this.config?.minValue;
+    }
+    get resolvedMaxValue() {
+        return this.formField?.maxValue || this.config?.maxValue;
+    }
+    get resolvedErrorText() {
+        return this.formField?.errorText || this.config?.errorText;
+    }
+    initializeComponent() {
+        this.defaultDateFormat = this.dateService.assignDefaultDateFormat(this.resolvedDateInputType, this.formField?.dateFormat || this.config?.dateFormat);
+        this.setupControl();
+        this.initializeDateLimits();
+        this.validateConfiguration();
+        this.defaultPlaceholder = getDefaultPlaceholder(this.resolvedDateInputType);
     }
     setupControl() {
-        let control = this.formGroup.get(this.formField.name);
+        const name = this.controlName;
+        if (!name) {
+            return;
+        }
+        let control = this.activeFormGroup.get(name);
         if (!control) {
-            control = new FormControl(null);
-            this.formGroup.addControl(this.formField.name, control);
+            control = new FormControl(this.getInitialValue());
+            this.activeFormGroup.addControl(name, control);
+        }
+        if (!this.formGroup &&
+            this.value !== undefined &&
+            control.value !== this.value) {
+            control.setValue(this.value, { emitEvent: false });
         }
         control.setValidators(this.getValidators());
-        if (this.formField.disabled) {
+        if (this.resolvedDisabled) {
             control.disable({ emitEvent: false });
         }
         else {
             control.enable({ emitEvent: false });
         }
         control.updateValueAndValidity({ emitEvent: false });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
+            this.valueChange.emit(selectedValue);
+            this.dateChange.emit(selectedValue);
+        });
+    }
+    getInitialValue() {
+        if (this.formField?.value !== undefined) {
+            return this.formField.value;
+        }
+        if (this.value !== undefined && this.value !== null) {
+            return this.value;
+        }
+        return this.config?.value ?? null;
     }
     initializeDateLimits() {
-        const dateFormat = this.formField.dateFormat;
-        if (this.formField.minValue) {
-            this.minDate = parseDate(this.formField.minValue, dateFormat);
+        this.minDate = this.resolvedMinValue
+            ? parseDate(this.resolvedMinValue, this.resolvedDateFormat)
+            : null;
+        this.maxDate = this.resolvedMaxValue
+            ? parseDate(this.resolvedMaxValue, this.resolvedDateFormat)
+            : null;
+    }
+    validateConfiguration() {
+        try {
+            this.dateService.validateDateFormatAndType(this.resolvedDateFormat, this.resolvedDateInputType, this.resolvedMinValue, this.resolvedMaxValue, this.resolvedHourFormat);
         }
-        if (this.formField.maxValue) {
-            this.maxDate = parseDate(this.formField.maxValue, dateFormat);
+        catch (error) {
+            if (error instanceof Error) {
+                console.error(error.message);
+            }
+            else {
+                console.error('An unknown error occurred.');
+            }
         }
     }
     getValidators() {
         const validators = [];
-        if (this.formField.required) {
+        if (this.resolvedRequired) {
             validators.push(Validators.required);
         }
         return validators;
     }
     getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
+        const control = this.activeFormGroup.get(this.controlName);
         if (control?.hasError('required')) {
-            return this.formField.errorText || `${this.formField.label} is required`;
+            return (this.resolvedErrorText ||
+                `${this.resolvedLabel || this.controlName} is required`);
         }
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDateInputComponent, deps: [{ token: PTDateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-datepicker\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder || defaultPlaceholder\"\n      [dateFormat]=\"formField.dateFormat || defaultDateFormat\"\n      [showIcon]=\"true\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    [showTime]=\"\n      formField.dateInputType === 'datetime' ||\n      formField.dateInputType === 'time'\n    \"\n      [timeOnly]=\"formField.dateInputType === 'time'\"\n      [hourFormat]=\"formField.hourFormat || '24'\"\n      [selectionMode]=\"formField.dateInputType === 'range' ? 'range' : 'single'\"\n      appendTo=\"body\"\n      [panelStyle]=\"{ zIndex: 99999 }\"\n    ></p-datepicker>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-datepicker\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      appendTo=\"body\"\n      [panelStyle]=\"{ zIndex: 99999 }\"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-date-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-datepicker\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder || defaultPlaceholder\"\n      [dateFormat]=\"formField.dateFormat || defaultDateFormat\"\n      [showIcon]=\"true\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n    [showTime]=\"\n      formField.dateInputType === 'datetime' ||\n      formField.dateInputType === 'time'\n    \"\n      [timeOnly]=\"formField.dateInputType === 'time'\"\n      [hourFormat]=\"formField.hourFormat || '24'\"\n      [selectionMode]=\"formField.dateInputType === 'range' ? 'range' : 'single'\"\n      appendTo=\"body\"\n      [panelStyle]=\"{ zIndex: 99999 }\"\n    ></p-datepicker>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-date-input', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-datepicker\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      appendTo=\"body\"\n      [panelStyle]=\"{ zIndex: 99999 }\"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"] }]
         }], ctorParameters: () => [{ type: PTDateService }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dateChange: [{
+                type: Output
             }] } });
 
 class PTNumberInputComponent {
@@ -2146,11 +2391,11 @@ class PTNumberInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNumberInputComponent, isStandalone: false, selector: "pt-number-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === 'left') {\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n      }\n      @if (formField.iconPosition === 'right') {\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNumberInputComponent, isStandalone: false, selector: "pt-number-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === \"left\") {\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n      }\n\n      @if (formField.iconPosition === \"right\") {\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\n\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-field ::ng-deep .p-inputnumber{width:100%}.form-field ::ng-deep .p-inputnumber-input{width:100%}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-inputnumber.ng-invalid.ng-touched .p-inputnumber-input,.form-field ::ng-deep .p-inputnumber.ng-invalid.ng-dirty .p-inputnumber-input{border-color:#dc2626}.form-field ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-number-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === 'left') {\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n      }\n      @if (formField.iconPosition === 'right') {\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-number-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === \"left\") {\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n      }\n\n      @if (formField.iconPosition === \"right\") {\n        <p-inputNumber\n          [inputId]=\"inputId\"\n          [name]=\"formField.name\"\n          [formControlName]=\"formField.name\"\n          mode=\"decimal\"\n          [locale]=\"formField.numberFormat || undefined\"\n          [useGrouping]=\"!!formField.numberFormat\"\n          [minFractionDigits]=\"formField.decimalDigits || 0\"\n          [maxFractionDigits]=\"formField.decimalDigits || 0\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></p-inputNumber>\n\n        @if (formField.iconClass || formField.currency) {\n          <p-inputGroupAddon>\n            @if (formField.iconClass) {\n              <i [ngClass]=\"formField.iconClass\"></i>\n            }\n\n            @if (!formField.iconClass && formField.currency) {\n              <span>\n                {{ formField.currency }}\n              </span>\n            }\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\n\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-field ::ng-deep .p-inputnumber{width:100%}.form-field ::ng-deep .p-inputnumber-input{width:100%}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-inputnumber.ng-invalid.ng-touched .p-inputnumber-input,.form-field ::ng-deep .p-inputnumber.ng-invalid.ng-dirty .p-inputnumber-input{border-color:#dc2626}.form-field ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2210,11 +2455,11 @@ class PTSwitchInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\" style=\"display: flex; align-items: center\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" style=\"margin-left: 8px\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".switch-container{display:flex;align-items:center}.error-container{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"switch-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\" style=\"display: flex; align-items: center\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" style=\"margin-left: 8px\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".switch-container{display:flex;align-items:center}.error-container{margin-top:5px}\n"] }]
+            args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"switch-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2369,6 +2614,15 @@ class PTTextInputComponent {
                 return 'text';
         }
     }
+    isPasswordInput() {
+        return this.formField.type === FormInputTypeEnum.PASSWORD;
+    }
+    getPasswordToggleMask() {
+        return this.formField.toggleMask ?? true;
+    }
+    getPasswordFeedback() {
+        return this.formField.feedback ?? false;
+    }
     getValidators() {
         const validators = [];
         if (this.formField.required) {
@@ -2411,11 +2665,11 @@ class PTTextInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n  }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        @if (formField.iconClass) {\n          <p-inputIcon\n            [styleClass]=\"formField.iconClass\"\n          ></p-inputIcon>\n        }\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto',\n        }\"\n          />\n      </p-iconField>\n    } @else {\n      <input\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto',\n      }\"\n        />\n    }\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n        ) {\n        <small\n          class=\"p-error\"\n          >\n          {{ getErrorMessage() }}\n        </small>\n      }\n      <div class=\"spacer\"></div>\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div\n          class=\"character-counter\"\n          >\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        (formGroup.get(formField.name)?.touched ||\n          formGroup.get(formField.name)?.dirty)\n      ) {\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n  }\"\n    >\n    @if (formField.label) {\n      <label [for]=\"inputId\">\n        {{ formField.label }}\n      </label>\n    }\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        @if (formField.iconClass) {\n          <p-inputIcon\n            [styleClass]=\"formField.iconClass\"\n          ></p-inputIcon>\n        }\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto',\n        }\"\n          />\n      </p-iconField>\n    } @else {\n      <input\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto',\n      }\"\n        />\n    }\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n        ) {\n        <small\n          class=\"p-error\"\n          >\n          {{ getErrorMessage() }}\n        </small>\n      }\n      <div class=\"spacer\"></div>\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div\n          class=\"character-counter\"\n          >\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
+            args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        (formGroup.get(formField.name)?.touched ||\n          formGroup.get(formField.name)?.dirty)\n      ) {\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2423,42 +2677,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 class PTDropdownComponent {
+    constructor() {
+        /**
+         * Two-way standalone value.
+         */
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.standaloneFormGroup = new FormGroup({});
+    }
     ngOnInit() {
         this.setupControl();
     }
     ngOnChanges(changes) {
-        if (changes['formField'] && !changes['formField'].firstChange) {
+        if (changes['formGroup'] ||
+            changes['formField'] ||
+            changes['config'] ||
+            changes['value']) {
             this.setupControl();
         }
     }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    get activeFormGroup() {
+        return this.formGroup || this.standaloneFormGroup;
+    }
+    get controlName() {
+        return this.formField?.name || this.config?.name || 'dropdown';
+    }
     get inputId() {
-        return `pt-dropdown-${this.formField?.name || 'field'}`;
+        return `pt-dropdown-${this.controlName}`;
     }
     get labelId() {
-        return `pt-dropdown-label-${this.formField?.name || 'field'}`;
+        return `pt-dropdown-label-${this.controlName}`;
+    }
+    get resolvedHidden() {
+        return this.formField?.hidden ?? this.config?.hidden ?? false;
+    }
+    get resolvedLabel() {
+        return this.formField?.label || this.config?.label;
+    }
+    get resolvedWidth() {
+        return this.formField?.width || this.config?.width || '100%';
+    }
+    get resolvedOptions() {
+        return this.formField?.options || this.config?.options || [];
+    }
+    get resolvedPlaceholder() {
+        return (this.formField?.placeholder ||
+            this.config?.placeholder ||
+            'Select an option');
+    }
+    get resolvedOptionLabel() {
+        return this.formField?.optionLabel || this.config?.optionLabel || 'label';
+    }
+    get resolvedOptionValue() {
+        return this.formField?.optionValue || this.config?.optionValue || 'value';
+    }
+    get resolvedOptionDisabled() {
+        return (this.formField?.optionDisabled ||
+            this.config?.optionDisabled ||
+            'disabled');
+    }
+    get resolvedFilter() {
+        return this.formField?.filter === true || this.config?.filter === true;
+    }
+    get resolvedFilterBy() {
+        return this.formField?.filterBy || this.config?.filterBy || 'label';
+    }
+    get resolvedRequired() {
+        return this.formField?.required ?? this.config?.required ?? false;
+    }
+    get resolvedDisabled() {
+        return this.formField?.disabled ?? this.config?.disabled ?? false;
+    }
+    get resolvedErrorText() {
+        return this.formField?.errorText || this.config?.errorText;
+    }
+    get resolvedIcon() {
+        return this.formField?.icon || this.config?.icon;
     }
     setupControl() {
-        if (!this.formGroup || !this.formField?.name) {
+        const name = this.controlName;
+        if (!name) {
             return;
         }
-        const hasExplicitValue = this.hasExplicitFieldValue(this.formField.value);
-        const normalizedValue = this.normalizeValue(this.formField.value);
-        let control = this.formGroup.get(this.formField.name);
+        const initialValue = this.getInitialValue();
+        const hasExplicitValue = this.hasExplicitFieldValue(initialValue);
+        const normalizedValue = this.normalizeValue(initialValue);
+        let control = this.activeFormGroup.get(name);
         if (!control) {
             control = new FormControl(hasExplicitValue ? normalizedValue : null);
-            this.formGroup.addControl(this.formField.name, control);
+            this.activeFormGroup.addControl(name, control);
         }
-        else if (hasExplicitValue) {
-            control.setValue(normalizedValue, { emitEvent: false });
+        else if (!this.formGroup && this.hasExplicitFieldValue(this.value)) {
+            control.setValue(this.normalizeValue(this.value), { emitEvent: false });
         }
         control.setValidators(this.getValidators());
-        if (this.formField.disabled) {
+        if (this.resolvedDisabled) {
             control.disable({ emitEvent: false });
         }
         else {
             control.enable({ emitEvent: false });
         }
         control.updateValueAndValidity({ emitEvent: false });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
+            this.valueChange.emit(selectedValue);
+            this.selectionChange.emit(selectedValue);
+        });
+    }
+    getInitialValue() {
+        if (this.formField?.value !== undefined) {
+            return this.formField.value;
+        }
+        if (this.value !== undefined && this.value !== null && this.value !== '') {
+            return this.value;
+        }
+        return this.config?.value ?? null;
     }
     hasExplicitFieldValue(value) {
         return value !== null && value !== undefined && value !== '';
@@ -2474,15 +2811,16 @@ class PTDropdownComponent {
     }
     getValidators() {
         const validators = [];
-        if (this.formField.required) {
+        if (this.resolvedRequired) {
             validators.push(Validators.required);
         }
         return validators;
     }
     getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
+        const control = this.activeFormGroup.get(this.controlName);
         if (control?.hasError('required')) {
-            return this.formField.errorText || `${this.formField.label} is required`;
+            return (this.resolvedErrorText ||
+                `${this.resolvedLabel || this.controlName} is required`);
         }
         return '';
     }
@@ -2490,7 +2828,7 @@ class PTDropdownComponent {
         const source = option?.iconStyle ||
             option?.iconImageStyle ||
             option?.icon ||
-            this.formField.icon;
+            this.resolvedIcon;
         if (!source) {
             return { type: 'none' };
         }
@@ -2547,18 +2885,24 @@ class PTDropdownComponent {
     }
     buildImageStyle(icon) {
         const styles = {};
-        if (icon.width)
+        if (icon.width) {
             styles.width = icon.width;
-        if (icon.height)
+        }
+        if (icon.height) {
             styles.height = icon.height;
-        if (icon.marginLeft)
+        }
+        if (icon.marginLeft) {
             styles['margin-left'] = icon.marginLeft;
-        if (icon.marginRight)
+        }
+        if (icon.marginRight) {
             styles['margin-right'] = icon.marginRight;
-        if (icon.marginTop)
+        }
+        if (icon.marginTop) {
             styles['margin-top'] = icon.marginTop;
-        if (icon.marginBottom)
+        }
+        if (icon.marginBottom) {
             styles['margin-bottom'] = icon.marginBottom;
+        }
         if (icon.shape === 'circular') {
             styles['border-radius'] = '50%';
         }
@@ -2571,7 +2915,7 @@ class PTDropdownComponent {
         const src = option?.iconStyle ||
             option?.iconImageStyle ||
             option?.icon ||
-            this.formField.icon;
+            this.resolvedIcon;
         if (this.isIconStyle(src) && src.position) {
             return src.position;
         }
@@ -2581,15 +2925,23 @@ class PTDropdownComponent {
         return 'left';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDropdownComponent, isStandalone: false, selector: "pt-dropdown", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [id]=\"labelId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-select\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [options]=\"formField.options\"\n      [placeholder]=\"formField.placeholder || 'Select an option'\"\n      [optionLabel]=\"formField.optionLabel || 'label'\"\n      [optionValue]=\"formField.optionValue || 'value'\"\n      [optionDisabled]=\"formField.optionDisabled || 'disabled'\"\n      dataKey=\"value\"\n      [filter]=\"formField.filter === true\"\n      [filterBy]=\"formField.filterBy || 'label'\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n      [ariaLabelledBy]=\"labelId\"\n      >\n      <ng-template pTemplate=\"selectedItem\" let-option>\n        @if (option) {\n          <div class=\"pt-dropdown-item\">\n            @if (getResolvedIcon(option); as iconMeta) {\n              @if (iconMeta.type === 'image') {\n                <img\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  class=\"pt-dropdown-icon-image\"\n                  />\n              }\n              @if (iconMeta.type === 'font') {\n                <i\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  class=\"pt-dropdown-icon-font\"\n                ></i>\n              }\n            }\n            <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n          </div>\n        } @else {\n          <span>{{ formField.placeholder || \"Select an option\" }}</span>\n        }\n      </ng-template>\n      <ng-template pTemplate=\"item\" let-option>\n        <div\n          class=\"pt-dropdown-item\"\n          [class.pt-dropdown-parent-option]=\"option?.isParent\"\n          [class.pt-dropdown-child-option]=\"option?.isChild\"\n          [class.pt-dropdown-disabled-option]=\"option?.disabled\"\n          [ngStyle]=\"{ 'padding-left': option?.indent || '0rem' }\"\n          >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === 'image') {\n              <img\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                class=\"pt-dropdown-icon-image\"\n                />\n            }\n            @if (iconMeta.type === 'font') {\n              <i\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                class=\"pt-dropdown-icon-font\"\n              ></i>\n            }\n          }\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-template>\n    </p-select>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}.pt-dropdown-item{display:flex;align-items:center;gap:.55rem}.pt-dropdown-parent-option{font-weight:700}.pt-dropdown-child-option{font-weight:400}.pt-dropdown-disabled-option{opacity:.65;cursor:not-allowed}.pt-dropdown-icon-font{width:1.25rem;text-align:center}.pt-dropdown-icon-image{object-fit:cover}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDropdownComponent, isStandalone: false, selector: "pt-dropdown", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [id]=\"labelId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-select\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [optionDisabled]=\"resolvedOptionDisabled\"\n      [dataKey]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n      [ariaLabelledBy]=\"labelId\"\n    >\n      <ng-template pTemplate=\"selectedItem\" let-option>\n        @if (option) {\n          <div class=\"pt-dropdown-item\">\n            @if (getResolvedIcon(option); as iconMeta) {\n              @if (iconMeta.type === \"image\") {\n                <img\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  class=\"pt-dropdown-icon-image\"\n                />\n              }\n\n              @if (iconMeta.type === \"font\") {\n                <i\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  class=\"pt-dropdown-icon-font\"\n                ></i>\n              }\n            }\n\n            <span class=\"pt-dropdown-label\">\n              {{ option[resolvedOptionLabel] }}\n            </span>\n          </div>\n        } @else {\n          <span>{{ resolvedPlaceholder }}</span>\n        }\n      </ng-template>\n\n      <ng-template pTemplate=\"item\" let-option>\n        <div\n          class=\"pt-dropdown-item\"\n          [class.pt-dropdown-parent-option]=\"option?.isParent\"\n          [class.pt-dropdown-child-option]=\"option?.isChild\"\n          [class.pt-dropdown-disabled-option]=\"option?.disabled\"\n          [ngStyle]=\"{ 'padding-left': option?.indent || '0rem' }\"\n        >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === \"image\") {\n              <img\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                class=\"pt-dropdown-icon-image\"\n              />\n            }\n\n            @if (iconMeta.type === \"font\") {\n              <i\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                class=\"pt-dropdown-icon-font\"\n              ></i>\n            }\n          }\n\n          <span class=\"pt-dropdown-label\">\n            {{ option[resolvedOptionLabel] }}\n          </span>\n        </div>\n      </ng-template>\n    </p-select>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.55rem}.pt-dropdown-label{display:inline-block}.pt-dropdown-parent-option{font-weight:700}.pt-dropdown-child-option{font-weight:400}.pt-dropdown-disabled-option{opacity:.65;cursor:not-allowed}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;text-align:center}.pt-dropdown-icon-image{object-fit:cover}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-select.ng-invalid.ng-touched{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dropdown', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n    >\n    @if (formField.label) {\n      <label [id]=\"labelId\">\n        {{ formField.label }}\n      </label>\n    }\n    <p-select\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [options]=\"formField.options\"\n      [placeholder]=\"formField.placeholder || 'Select an option'\"\n      [optionLabel]=\"formField.optionLabel || 'label'\"\n      [optionValue]=\"formField.optionValue || 'value'\"\n      [optionDisabled]=\"formField.optionDisabled || 'disabled'\"\n      dataKey=\"value\"\n      [filter]=\"formField.filter === true\"\n      [filterBy]=\"formField.filterBy || 'label'\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n      [ariaLabelledBy]=\"labelId\"\n      >\n      <ng-template pTemplate=\"selectedItem\" let-option>\n        @if (option) {\n          <div class=\"pt-dropdown-item\">\n            @if (getResolvedIcon(option); as iconMeta) {\n              @if (iconMeta.type === 'image') {\n                <img\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  class=\"pt-dropdown-icon-image\"\n                  />\n              }\n              @if (iconMeta.type === 'font') {\n                <i\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  class=\"pt-dropdown-icon-font\"\n                ></i>\n              }\n            }\n            <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n          </div>\n        } @else {\n          <span>{{ formField.placeholder || \"Select an option\" }}</span>\n        }\n      </ng-template>\n      <ng-template pTemplate=\"item\" let-option>\n        <div\n          class=\"pt-dropdown-item\"\n          [class.pt-dropdown-parent-option]=\"option?.isParent\"\n          [class.pt-dropdown-child-option]=\"option?.isChild\"\n          [class.pt-dropdown-disabled-option]=\"option?.disabled\"\n          [ngStyle]=\"{ 'padding-left': option?.indent || '0rem' }\"\n          >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === 'image') {\n              <img\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                class=\"pt-dropdown-icon-image\"\n                />\n            }\n            @if (iconMeta.type === 'font') {\n              <i\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                class=\"pt-dropdown-icon-font\"\n              ></i>\n            }\n          }\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-template>\n    </p-select>\n    @if (\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n      ) {\n      <div\n        >\n        <small class=\"p-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}.pt-dropdown-item{display:flex;align-items:center;gap:.55rem}.pt-dropdown-parent-option{font-weight:700}.pt-dropdown-child-option{font-weight:400}.pt-dropdown-disabled-option{opacity:.65;cursor:not-allowed}.pt-dropdown-icon-font{width:1.25rem;text-align:center}.pt-dropdown-icon-image{object-fit:cover}\n"] }]
+            args: [{ selector: 'pt-dropdown', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [id]=\"labelId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-select\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [optionDisabled]=\"resolvedOptionDisabled\"\n      [dataKey]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n      [ariaLabelledBy]=\"labelId\"\n    >\n      <ng-template pTemplate=\"selectedItem\" let-option>\n        @if (option) {\n          <div class=\"pt-dropdown-item\">\n            @if (getResolvedIcon(option); as iconMeta) {\n              @if (iconMeta.type === \"image\") {\n                <img\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  class=\"pt-dropdown-icon-image\"\n                />\n              }\n\n              @if (iconMeta.type === \"font\") {\n                <i\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  class=\"pt-dropdown-icon-font\"\n                ></i>\n              }\n            }\n\n            <span class=\"pt-dropdown-label\">\n              {{ option[resolvedOptionLabel] }}\n            </span>\n          </div>\n        } @else {\n          <span>{{ resolvedPlaceholder }}</span>\n        }\n      </ng-template>\n\n      <ng-template pTemplate=\"item\" let-option>\n        <div\n          class=\"pt-dropdown-item\"\n          [class.pt-dropdown-parent-option]=\"option?.isParent\"\n          [class.pt-dropdown-child-option]=\"option?.isChild\"\n          [class.pt-dropdown-disabled-option]=\"option?.disabled\"\n          [ngStyle]=\"{ 'padding-left': option?.indent || '0rem' }\"\n        >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === \"image\") {\n              <img\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                class=\"pt-dropdown-icon-image\"\n              />\n            }\n\n            @if (iconMeta.type === \"font\") {\n              <i\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                class=\"pt-dropdown-icon-font\"\n              ></i>\n            }\n          }\n\n          <span class=\"pt-dropdown-label\">\n            {{ option[resolvedOptionLabel] }}\n          </span>\n        </div>\n      </ng-template>\n    </p-select>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.55rem}.pt-dropdown-label{display:inline-block}.pt-dropdown-parent-option{font-weight:700}.pt-dropdown-child-option{font-weight:400}.pt-dropdown-disabled-option{opacity:.65;cursor:not-allowed}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;text-align:center}.pt-dropdown-icon-image{object-fit:cover}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-select.ng-invalid.ng-touched{border-color:#dc2626}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 
 class PTDynamicFormFieldComponent {
@@ -2621,7 +2973,7 @@ class PTDynamicFormFieldComponent {
         return field;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n  >\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- EMAIL (NEW) -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n  >\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- EMAIL (NEW) -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
             type: Component,
@@ -2766,11 +3118,11 @@ class PTFormBuilderComponent {
         this.formChange.emit(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n  >\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track group) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n        >\n        @for (field of group.fields; track field) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color\"\n        (click)=\"\n          button.isSubmit\n            ? onSubmit()\n            : button.isClear\n              ? onClear()\n              : button.action\n                ? button.action()\n                : null\n        \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button.text) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color || ''\"\n          [ngStyle]=\"{\n            color: button.fontColor || null,\n            'background-color': button.backgroundColor || null,\n            'border-color':\n              button.borderColor || button.backgroundColor || null,\n          }\"\n          (click)=\"\n            button.isSubmit\n              ? onSubmit()\n              : button.isClear\n                ? onClear()\n                : button.action\n                  ? button.action()\n                  : null\n          \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n  >\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track group) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n        >\n        @for (field of group.fields; track field) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color\"\n        (click)=\"\n          button.isSubmit\n            ? onSubmit()\n            : button.isClear\n              ? onClear()\n              : button.action\n                ? button.action()\n                : null\n        \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
+            args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button.text) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color || ''\"\n          [ngStyle]=\"{\n            color: button.fontColor || null,\n            'background-color': button.backgroundColor || null,\n            'border-color':\n              button.borderColor || button.backgroundColor || null,\n          }\"\n          (click)=\"\n            button.isSubmit\n              ? onSubmit()\n              : button.isClear\n                ? onClear()\n                : button.action\n                  ? button.action()\n                  : null\n          \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
                 type: Input
             }], buttons: [{
@@ -2858,15 +3210,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class PTTextInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputModule, declarations: [PTTextInputComponent], imports: [CommonModule,
+            FormsModule,
             ReactiveFormsModule,
             InputTextModule,
             IconFieldModule,
-            InputIconModule], exports: [PTTextInputComponent] }); }
+            InputIconModule,
+            PasswordModule], exports: [PTTextInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputModule, imports: [CommonModule,
+            FormsModule,
             ReactiveFormsModule,
             InputTextModule,
             IconFieldModule,
-            InputIconModule] }); }
+            InputIconModule,
+            PasswordModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputModule, decorators: [{
             type: NgModule,
@@ -2874,10 +3230,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     declarations: [PTTextInputComponent],
                     imports: [
                         CommonModule,
+                        FormsModule,
                         ReactiveFormsModule,
                         InputTextModule,
                         IconFieldModule,
                         InputIconModule,
+                        PasswordModule,
                     ],
                     exports: [PTTextInputComponent],
                 }]
@@ -4687,6 +5045,10 @@ class PTLoginCardComponent {
             placeholder: this.loginPageConfig.passwordField?.placeholder ||
                 'Entrer votre mot de passe',
             type: this.loginPageConfig.passwordField?.type || FormInputTypeEnum.PASSWORD,
+            // Show / hide password is now handled by pt-text-input via PrimeNG p-password.
+            toggleMask: this.loginPageConfig.passwordField?.toggleMask ?? true,
+            // Disabled by default for login forms.
+            feedback: this.loginPageConfig.passwordField?.feedback ?? false,
             ...this.loginPageConfig.passwordField,
         };
         // Initialize buttonConfig
@@ -4722,7 +5084,7 @@ class PTLoginCardComponent {
         this.formGroup.addControl(this.loginPageConfig.passwordField.name, this.fb.control(this.loginPageConfig.login?.password, passwordValidators));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n        />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px'\n      }\"\n      >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n  <!-- Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
@@ -4733,7 +5095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTCardModule,
                         PTButtonModule,
                         PTTextInputModule,
-                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n        />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px'\n      }\"\n      >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n  <!-- Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\n"] }]
+                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginErrorMessage: [{
@@ -4824,79 +5186,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
-// src/app/shared/pt-confirm-dialog/pt-confirm-dialog.component.ts
-const DIALOG_STYLES = {
-    [SeverityEnum.WARN]: {
-        header: {
-            text: 'Attention',
-            color: '#f59e0b',
-        },
+const PT_CONFIRM_DIALOG_DEFAULT_WIDTH = '560px';
+const PT_CONFIRM_DIALOG_DEFAULT_HEIGHT = 'auto';
+const PT_CONFIRM_DIALOG_OVERLAY_CLASS = 'pt-confirm-dialog-overlay';
+const PT_CONFIRM_DIALOG_NO_FOOTER_CLASS = 'pt-confirm-dialog-no-footer';
+const PT_CONFIRM_DIALOG_DEFAULT_FOOTER_ALIGN = AlignEnum.CENTER;
+const PT_CONFIRM_DIALOG_DEFAULT_SEVERITY = SeverityEnum.INFO;
+const PT_CONFIRM_DIALOG_COLORS = {
+    INFO: {
+        background: '#eff6ff',
+        border: '#bfdbfe',
+        iconBackground: '#dbeafe',
+        icon: '#2563eb',
+        title: '#1e40af',
+        message: '#334155',
     },
-    [SeverityEnum.SUCCESS]: {
-        header: {
-            text: 'Confirmation',
-            color: '#16a34a',
-        },
+    SUCCESS: {
+        background: '#f0fdf4',
+        border: '#bbf7d0',
+        iconBackground: '#dcfce7',
+        icon: '#16a34a',
+        title: '#15803d',
+        message: '#334155',
     },
-    [SeverityEnum.DANGER]: {
-        header: {
-            text: 'Suppression',
-            color: '#dc2626',
-        },
+    WARNING: {
+        background: '#fffbeb',
+        border: '#fde68a',
+        iconBackground: '#fef3c7',
+        icon: '#d97706',
+        title: '#b45309',
+        message: '#334155',
     },
-    [SeverityEnum.INFO]: {
-        header: {
-            text: 'Information',
-            color: '#2563eb',
-        },
+    DANGER: {
+        background: '#fef2f2',
+        border: '#fecaca',
+        iconBackground: '#fee2e2',
+        icon: '#dc2626',
+        title: '#b91c1c',
+        message: '#334155',
     },
 };
-const DEFAULT_DIALOG_CONFIG$1 = {
-    header: { text: 'Confirmation' },
-    visible: false,
-    width: '720px',
-    height: 'auto',
-    content: '',
-    confirmButtonConfig: { label: 'Confirmer' },
-    cancelButtonConfig: { label: 'Annuler' },
-    dialogStyle: SeverityEnum.INFO,
+const PT_CONFIRM_DIALOG_SEVERITY_CLASS = {
+    INFO: 'pt-confirm-dialog-info',
+    SUCCESS: 'pt-confirm-dialog-success',
+    WARNING: 'pt-confirm-dialog-warning',
+    DANGER: 'pt-confirm-dialog-danger',
+};
+const PT_CONFIRM_DIALOG_DEFAULT_ICON = {
+    INFO: 'pi pi-info-circle',
+    SUCCESS: 'pi pi-check-circle',
+    WARNING: 'pi pi-exclamation-triangle',
+    DANGER: 'pi pi-times-circle',
+};
+const PT_CONFIRM_DIALOG_DEFAULT_HEADER = {
+    INFO: 'Information',
+    SUCCESS: 'Succès',
+    WARNING: 'Attention',
+    DANGER: 'Confirmation requise',
 };
+
 class PTConfirmDialogComponent {
-    constructor(confirmationService, renderer) {
+    constructor(confirmationService) {
         this.confirmationService = confirmationService;
-        this.renderer = renderer;
-        this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG$1 };
+        this.dialogConfig = {
+            header: { text: 'Confirmation' },
+            content: '',
+            visible: false,
+            width: PT_CONFIRM_DIALOG_DEFAULT_WIDTH,
+            height: PT_CONFIRM_DIALOG_DEFAULT_HEIGHT,
+            dialogStyle: PT_CONFIRM_DIALOG_DEFAULT_SEVERITY,
+            closeOnEscape: true,
+            footerAlign: PT_CONFIRM_DIALOG_DEFAULT_FOOTER_ALIGN,
+            confirmButtonConfig: {
+                label: 'Confirmer',
+                icon: 'pi pi-check',
+            },
+            cancelButtonConfig: {
+                label: 'Annuler',
+                icon: 'pi pi-times',
+            },
+        };
         this.confirm = new EventEmitter();
         this.cancel = new EventEmitter();
-        this.SeverityEnum = SeverityEnum;
+        this.overlayStyleClass = `${PT_CONFIRM_DIALOG_OVERLAY_CLASS} ${PT_CONFIRM_DIALOG_SEVERITY_CLASS.INFO}`;
+        this.isDialogOpen = false;
     }
     ngAfterContentInit() {
-        // Nothing mandatory here.
+        // Projection support only.
     }
     ngOnChanges(changes) {
         if (!changes['dialogConfig']) {
             return;
         }
-        this.applyDialogStyle();
-        if (this.dialogConfig.visible) {
+        if (this.dialogConfig?.visible) {
             this.showDialog();
         }
     }
-    getActiveForm() {
-        if (this.formGroup) {
-            return this.formGroup;
-        }
-        const formBuilder = this.projectedFormBuilder;
-        if (formBuilder && formBuilder.form) {
-            return formBuilder.form;
+    onEscapeKey(event) {
+        if (!this.isDialogOpen || this.dialogConfig.closeOnEscape === false) {
+            return;
         }
-        return null;
+        event.preventDefault();
+        event.stopPropagation();
+        this.onCancelClick();
     }
-    isConfirmDisabled() {
-        const form = this.getActiveForm();
-        return !!form && form.invalid;
+    showDialog() {
+        this.overlayStyleClass = [
+            PT_CONFIRM_DIALOG_OVERLAY_CLASS,
+            this.getSeverityClass(),
+            this.hasFooter() ? '' : PT_CONFIRM_DIALOG_NO_FOOTER_CLASS,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.isDialogOpen = true;
+        this.confirmationService.confirm({
+            header: '',
+            message: this.getDialogContentText() || ' ',
+            accept: () => {
+                this.handleConfirm();
+            },
+            reject: () => {
+                this.handleCancel();
+            },
+        });
     }
-    onConfirmClick(cd) {
+    onConfirmClick() {
         const form = this.getActiveForm();
         if (form) {
             form.markAllAsTouched();
@@ -4905,287 +5319,215 @@ class PTConfirmDialogComponent {
                 return;
             }
         }
-        cd.accept();
-    }
-    applyDialogStyle() {
-        const dialogStyle = this.dialogConfig.dialogStyle || SeverityEnum.INFO;
-        const styleConfig = DIALOG_STYLES[dialogStyle] || {};
-        const current = this.dialogConfig || {};
-        const mergedHeader = current.header !== undefined
-            ? current.header
-            : styleConfig.header !== undefined
-                ? styleConfig.header
-                : DEFAULT_DIALOG_CONFIG$1.header;
-        this.dialogConfig = {
-            ...DEFAULT_DIALOG_CONFIG$1,
-            ...current,
-            ...styleConfig,
-            header: mergedHeader,
-            confirmButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG$1.confirmButtonConfig,
-                ...current.confirmButtonConfig,
-            },
-            cancelButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG$1.cancelButtonConfig,
-                ...current.cancelButtonConfig,
-            },
-            visible: current.visible,
-            width: current.width || DEFAULT_DIALOG_CONFIG$1.width,
-            height: current.height || DEFAULT_DIALOG_CONFIG$1.height,
-        };
+        this.handleConfirm();
     }
-    getSeverityClass() {
-        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        switch (style) {
-            case SeverityEnum.DANGER:
-                return 'pt-confirm-dialog-danger';
-            case SeverityEnum.WARNING:
-                return 'pt-confirm-dialog-warning';
-            case SeverityEnum.SUCCESS:
-                return 'pt-confirm-dialog-success';
-            case SeverityEnum.INFO:
-            default:
-                return 'pt-confirm-dialog-info';
-        }
+    onCancelClick() {
+        this.handleCancel();
     }
-    getSeverityColors() {
-        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        switch (style) {
-            case SeverityEnum.DANGER:
-                return { header: '#b91c1c', message: '#4b5563' };
-            case SeverityEnum.WARNING:
-                return { header: '#b45309', message: '#92400e' };
-            case SeverityEnum.SUCCESS:
-                return { header: '#15803d', message: '#166534' };
-            case SeverityEnum.INFO:
-            default:
-                return { header: '#2563eb', message: '#2563eb' };
-        }
+    hasFooter() {
+        return !!(this.dialogConfig?.confirmButtonConfig ||
+            this.dialogConfig?.cancelButtonConfig);
     }
     get confirmButtonModel() {
-        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const confirmSeverity = style === SeverityEnum.DANGER
-            ? SeverityEnum.DANGER
-            : style === SeverityEnum.WARNING
-                ? SeverityEnum.WARNING
-                : style === SeverityEnum.SUCCESS
-                    ? SeverityEnum.SUCCESS
-                    : SeverityEnum.INFO;
+        const config = this.dialogConfig.confirmButtonConfig;
         return {
-            label: this.dialogConfig.confirmButtonConfig?.label ?? 'Confirmer',
-            icon: this.dialogConfig.confirmButtonConfig?.icon ?? 'pi pi-check',
-            iconPos: 'left',
-            type: 'button',
-            outlined: true,
-            severity: confirmSeverity,
-            styleClass: (this.dialogConfig.confirmButtonConfig?.styleClass || '') +
-                ' pt-confirm-dialog-confirm-btn',
-            width: 'auto',
-            disabled: this.isConfirmDisabled(),
+            ...(config || {}),
+            label: config?.label || 'Confirmer',
+            icon: config?.icon || 'pi pi-check',
+            iconPos: config?.iconPos || 'left',
+            type: config?.type || 'button',
+            outlined: config?.outlined ?? true,
+            severity: config?.severity || this.getButtonSeverity(),
+            width: config?.width || 'auto',
+            height: config?.height || 'auto',
+            styleClass: [config?.styleClass || '', 'pt-confirm-dialog-confirm-btn']
+                .join(' ')
+                .trim(),
+            disabled: config?.disabled || this.isConfirmDisabled(),
         };
     }
     get cancelButtonModel() {
+        const config = this.dialogConfig.cancelButtonConfig;
         return {
-            label: this.dialogConfig.cancelButtonConfig?.label ?? 'Annuler',
-            icon: this.dialogConfig.cancelButtonConfig?.icon ?? 'pi pi-times',
-            iconPos: 'left',
-            type: 'button',
-            outlined: true,
-            severity: SeverityEnum.INFO,
-            styleClass: (this.dialogConfig.cancelButtonConfig?.styleClass || '') +
-                ' pt-confirm-dialog-cancel-btn',
-            width: 'auto',
+            ...(config || {}),
+            label: config?.label || 'Annuler',
+            icon: config?.icon || 'pi pi-times',
+            iconPos: config?.iconPos || 'left',
+            type: config?.type || 'button',
+            outlined: config?.outlined ?? true,
+            severity: config?.severity || SeverityEnum.INFO,
+            width: config?.width || 'auto',
+            height: config?.height || 'auto',
+            styleClass: [config?.styleClass || '', 'pt-confirm-dialog-cancel-btn']
+                .join(' ')
+                .trim(),
+            disabled: config?.disabled || false,
         };
     }
-    showDialog() {
-        this.confirmationService.confirm({
-            header: '',
-            message: this.getDialogContentText() || ' ',
-            accept: () => this.confirm.emit(),
-            reject: (_type) => this.cancel.emit(),
-        });
-        setTimeout(() => {
-            const dialogElement = this.getLastConfirmDialogElement();
-            if (!dialogElement) {
-                return;
-            }
-            this.applyDialogRootStyles(dialogElement);
-            this.applyDialogInnerLayoutFixes(dialogElement);
-        }, 0);
-    }
-    getLastConfirmDialogElement() {
-        const dialogs = Array.from(document.querySelectorAll('.p-confirm-dialog'));
-        if (!dialogs.length) {
-            return null;
-        }
-        return dialogs[dialogs.length - 1];
-    }
-    applyDialogRootStyles(dialogElement) {
-        this.renderer.addClass(dialogElement, 'pt-confirm-dialog-overlay');
-        this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-danger');
-        this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-warning');
-        this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-success');
-        this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-info');
-        this.renderer.addClass(dialogElement, this.getSeverityClass());
-        this.renderer.setStyle(dialogElement, 'width', this.dialogConfig.width || '720px');
-        this.renderer.setStyle(dialogElement, 'max-width', '92vw');
-        this.renderer.setStyle(dialogElement, 'height', this.dialogConfig.height || 'auto');
-        this.renderer.setStyle(dialogElement, 'min-height', 'unset');
-        this.renderer.setStyle(dialogElement, 'max-height', 'none');
-        this.renderer.setStyle(dialogElement, 'display', 'block');
-    }
-    applyDialogInnerLayoutFixes(dialogElement) {
-        this.resetElementLayout(dialogElement.querySelector('.p-dialog-header'), {
-            display: 'none',
-            height: '0',
-            minHeight: '0',
-            padding: '0',
-            border: '0',
-        });
-        this.resetElementLayout(dialogElement.querySelector('.p-dialog-content'), {
-            display: 'block',
-            flex: 'unset',
-            flexGrow: '0',
-            flexShrink: '0',
-            flexBasis: 'auto',
-            height: 'auto',
-            minHeight: 'unset',
-            maxHeight: 'none',
-            overflow: 'visible',
-            padding: '0',
-            margin: '0',
-            background: 'transparent',
-        });
-        this.resetElementLayout(dialogElement.querySelector('.p-confirm-dialog-message'), {
-            display: 'block',
-            flex: 'unset',
-            height: 'auto',
-            minHeight: 'unset',
-            maxHeight: 'none',
-            margin: '0',
-            padding: '0',
-            width: '100%',
-        });
-        this.resetElementLayout(dialogElement.querySelector('.p-dialog-footer'), {
-            display: 'block',
-            flex: 'unset',
-            flexGrow: '0',
-            flexShrink: '0',
-            flexBasis: 'auto',
-            height: 'auto',
-            minHeight: 'unset',
-            maxHeight: 'none',
-            margin: '0',
-        });
-        this.resetElementLayout(dialogElement.querySelector('.pt-confirm-dialog-card'), {
-            width: '100%',
-            height: 'auto',
-            minHeight: 'unset',
-            maxHeight: 'none',
-        });
-        this.resetElementLayout(dialogElement.querySelector('.pt-confirm-dialog-card-top'), {
-            height: 'auto',
-            minHeight: 'unset',
-            maxHeight: 'none',
-        });
-    }
-    resetElementLayout(element, styles) {
-        if (!element) {
-            return;
+    getFooterButtonsStyle() {
+        const align = this.dialogConfig.footerAlign || PT_CONFIRM_DIALOG_DEFAULT_FOOTER_ALIGN;
+        switch (align) {
+            case AlignEnum.LEFT:
+                return { justifyContent: 'flex-start' };
+            case AlignEnum.RIGHT:
+                return { justifyContent: 'flex-end' };
+            case AlignEnum.CENTER:
+            default:
+                return { justifyContent: 'center' };
         }
-        const htmlElement = element;
-        Object.entries(styles).forEach(([property, value]) => {
-            this.renderer.setStyle(htmlElement, property, value);
-        });
     }
     getDialogHeaderText() {
         const header = this.dialogConfig.header;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleHeader = DIALOG_STYLES[dialogStyle]?.header;
-        return typeof header === 'object' && header !== null && 'text' in header
-            ? header.text
-            : typeof header === 'string'
-                ? header
-                : typeof styleHeader === 'object' &&
-                    styleHeader !== null &&
-                    'text' in styleHeader
-                    ? styleHeader.text
-                    : 'Confirmation';
+        if (typeof header === 'string') {
+            return header;
+        }
+        if (header && typeof header === 'object' && 'text' in header) {
+            return String(header.text || this.getDefaultHeaderText());
+        }
+        return this.getDefaultHeaderText();
     }
-    getDialogHeaderStyle() {
-        const header = this.dialogConfig.header;
-        const { header: color } = this.getSeverityColors();
-        const fontSize = typeof header === 'object' && header !== null && header.fontSize
-            ? header.fontSize
-            : '20px';
-        return {
-            color,
-            fontSize,
-            fontWeight: 700,
-        };
+    getDialogContentText() {
+        const content = this.dialogConfig.content;
+        if (typeof content === 'string') {
+            return content;
+        }
+        if (content && typeof content === 'object' && 'text' in content) {
+            return String(content.text || '');
+        }
+        return '';
     }
     getDialogIconClass() {
         const header = this.dialogConfig.header;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleHeader = DIALOG_STYLES[dialogStyle]?.header;
-        const icon = typeof header === 'object' && header !== null && 'icon' in header
+        const icon = header && typeof header === 'object' && 'icon' in header
             ? header.icon
-            : typeof styleHeader === 'object' &&
-                styleHeader !== null &&
-                'icon' in styleHeader
-                ? styleHeader.icon
-                : undefined;
-        return typeof icon === 'string'
-            ? icon
-            : icon?.code || 'pi pi-exclamation-circle';
+            : undefined;
+        if (typeof icon === 'string') {
+            return icon;
+        }
+        if (icon?.code) {
+            return icon.code;
+        }
+        return PT_CONFIRM_DIALOG_DEFAULT_ICON[this.getNormalizedSeverity()];
     }
     getDialogIconStyle() {
         const header = this.dialogConfig.header;
-        const { header: defaultColor } = this.getSeverityColors();
-        const icon = typeof header === 'object' && header !== null && 'icon' in header
+        const icon = header && typeof header === 'object' && 'icon' in header
             ? header.icon
             : undefined;
+        const colors = this.getColors();
         return {
-            color: icon?.color || defaultColor,
-            fontSize: icon?.fontSize || '2.2rem',
+            color: icon?.color || colors.icon,
+            fontSize: icon?.fontSize || '2rem',
         };
     }
-    getDialogContentText() {
-        const content = this.dialogConfig.content;
-        if (typeof content === 'string') {
-            return content;
-        }
-        if (content && typeof content === 'object' && 'text' in content) {
-            return content.text ?? '';
-        }
-        return '';
+    getDialogHeaderStyle() {
+        const colors = this.getColors();
+        const header = this.dialogConfig.header;
+        return {
+            color: header?.color || colors.title,
+            fontSize: header?.fontSize || '1.35rem',
+            fontWeight: 700,
+        };
     }
     getDialogContentStyle() {
+        const colors = this.getColors();
         const content = this.dialogConfig.content;
-        const { message } = this.getSeverityColors();
-        let fontSize = '18px';
-        let textAlign;
-        if (typeof content === 'object' && content !== null) {
-            if (content.fontSize) {
-                fontSize = content.fontSize;
-            }
-            if (content.position) {
-                textAlign = content.position;
-            }
-        }
         return {
-            color: message,
-            fontSize,
-            ...(textAlign ? { textAlign } : {}),
+            color: content?.color || colors.message,
+            fontSize: content?.fontSize || '1rem',
+            textAlign: content?.position || AlignEnum.LEFT,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, deps: [{ token: i1$1.ConfirmationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- src/app/shared/pt-confirm-dialog/pt-confirm-dialog.component.html -->\n\n<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-card\">\n        <div class=\"pt-confirm-dialog-card-top\">\n          <div class=\"pt-confirm-dialog-icon-wrapper\">\n            <i\n              class=\"pt-confirm-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-confirm-dialog-text-wrapper\">\n            <div\n              class=\"pt-confirm-dialog-title\"\n              [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n              {{ getDialogHeaderText() }}\n            </div>\n\n            @if (dialogBodyTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"dialogBodyTpl\"\n              ></ng-container>\n            } @else {\n              <div\n                class=\"pt-confirm-dialog-message\"\n                [ngStyle]=\"getDialogContentStyle()\"\n                >\n                {{ getDialogContentText() }}\n              </div>\n            }\n\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-confirm-dialog-footer-buttons\">\n        @if (dialogConfig.cancelButtonConfig) {\n          <pt-button\n            [buttonConfig]=\"cancelButtonModel\"\n            (click)=\"cd.onReject()\"\n          ></pt-button>\n        }\n\n        @if (dialogConfig.confirmButtonConfig) {\n          <pt-button\n            [buttonConfig]=\"confirmButtonModel\"\n            (click)=\"onConfirmClick(cd)\"\n          ></pt-button>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay{width:520px;max-width:92vw;height:auto!important;min-height:unset!important;max-height:none!important;display:block!important;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{display:block!important;flex:unset!important;flex-grow:0!important;flex-shrink:0!important;flex-basis:auto!important;height:auto!important;min-height:unset!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important;border-top-left-radius:18px;border-top-right-radius:18px}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-confirm-dialog-message{display:block!important;flex:unset!important;height:auto!important;min-height:unset!important;max-height:none!important;margin:0!important;padding:0!important;width:100%!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{display:block!important;flex:unset!important;flex-grow:0!important;flex-shrink:0!important;flex-basis:auto!important;height:auto!important;min-height:unset!important;max-height:none!important;background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px!important;margin:0!important}.pt-confirm-dialog-card{width:100%;height:auto!important;min-height:unset!important;max-height:none!important;border-radius:18px 18px 0 0;overflow:hidden}.pt-confirm-dialog-card-top{height:auto!important;min-height:unset!important;max-height:none!important;padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .pt-confirm-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .pt-confirm-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .pt-confirm-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .pt-confirm-dialog-card{background-color:#e0f2fe}.pt-confirm-dialog-icon-wrapper{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:18px;box-sizing:border-box}.pt-confirm-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-confirm-dialog-message{font-size:18px;line-height:1.5;color:#4b5563;margin:0}.pt-confirm-dialog-footer-buttons{display:flex;justify-content:center;align-items:center;gap:16px}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button i.pi{margin-right:.5rem}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .p-dialog-footer .p-button:hover{background:#fef2f2!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button:hover{background:#fffbeb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button:hover{background:#f0fdf4!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}@media(max-width:768px){::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay{width:calc(100vw - 2rem)!important;max-width:calc(100vw - 2rem)!important}.pt-confirm-dialog-card-top{padding:24px}.pt-confirm-dialog-icon-wrapper{width:48px;height:48px;min-width:48px;margin-right:14px}.pt-confirm-dialog-title{font-size:19px}.pt-confirm-dialog-message{font-size:16px}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-confirm-dialog-footer-buttons{gap:10px;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
+    getDialogBodyStyle() {
+        const colors = this.getColors();
+        return {
+            background: colors.background,
+            borderColor: colors.border,
+        };
+    }
+    getIconWrapperStyle() {
+        const colors = this.getColors();
+        return {
+            background: colors.iconBackground,
+            borderColor: colors.border,
+        };
+    }
+    handleConfirm() {
+        if (!this.isDialogOpen) {
+            return;
+        }
+        this.isDialogOpen = false;
+        this.closeDialog();
+        this.confirm.emit();
+    }
+    handleCancel() {
+        if (!this.isDialogOpen) {
+            return;
+        }
+        this.isDialogOpen = false;
+        this.closeDialog();
+        this.cancel.emit();
+    }
+    closeDialog() {
+        this.confirmationService.close();
+    }
+    getActiveForm() {
+        if (this.formGroup) {
+            return this.formGroup;
+        }
+        if (this.projectedFormBuilder?.form) {
+            return this.projectedFormBuilder.form;
+        }
+        return null;
+    }
+    isConfirmDisabled() {
+        const form = this.getActiveForm();
+        return !!form && form.invalid;
+    }
+    getSeverityClass() {
+        return PT_CONFIRM_DIALOG_SEVERITY_CLASS[this.getNormalizedSeverity()];
+    }
+    getNormalizedSeverity() {
+        const raw = String(this.dialogConfig.dialogStyle || PT_CONFIRM_DIALOG_DEFAULT_SEVERITY)
+            .trim()
+            .toUpperCase();
+        if (raw === 'SUCCESS') {
+            return 'SUCCESS';
+        }
+        if (raw === 'WARNING' || raw === 'WARN') {
+            return 'WARNING';
+        }
+        if (raw === 'DANGER' || raw === 'ERROR') {
+            return 'DANGER';
+        }
+        return 'INFO';
+    }
+    getColors() {
+        return PT_CONFIRM_DIALOG_COLORS[this.getNormalizedSeverity()];
+    }
+    getDefaultHeaderText() {
+        return PT_CONFIRM_DIALOG_DEFAULT_HEADER[this.getNormalizedSeverity()];
+    }
+    getButtonSeverity() {
+        switch (this.getNormalizedSeverity()) {
+            case 'SUCCESS':
+                return SeverityEnum.SUCCESS;
+            case 'WARNING':
+                return SeverityEnum.WARNING;
+            case 'DANGER':
+                return SeverityEnum.DANGER;
+            case 'INFO':
+            default:
+                return SeverityEnum.INFO;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, deps: [{ token: i1$1.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 24px 60px #0f172a4d!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:#fff;overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid;box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:#ffffffd9;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:#fff;color:#0f172a;transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:#fff;box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<!-- src/app/shared/pt-confirm-dialog/pt-confirm-dialog.component.html -->\n\n<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-card\">\n        <div class=\"pt-confirm-dialog-card-top\">\n          <div class=\"pt-confirm-dialog-icon-wrapper\">\n            <i\n              class=\"pt-confirm-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-confirm-dialog-text-wrapper\">\n            <div\n              class=\"pt-confirm-dialog-title\"\n              [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n              {{ getDialogHeaderText() }}\n            </div>\n\n            @if (dialogBodyTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"dialogBodyTpl\"\n              ></ng-container>\n            } @else {\n              <div\n                class=\"pt-confirm-dialog-message\"\n                [ngStyle]=\"getDialogContentStyle()\"\n                >\n                {{ getDialogContentText() }}\n              </div>\n            }\n\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-confirm-dialog-footer-buttons\">\n        @if (dialogConfig.cancelButtonConfig) {\n          <pt-button\n            [buttonConfig]=\"cancelButtonModel\"\n            (click)=\"cd.onReject()\"\n          ></pt-button>\n        }\n\n        @if (dialogConfig.confirmButtonConfig) {\n          <pt-button\n            [buttonConfig]=\"confirmButtonModel\"\n            (click)=\"onConfirmClick(cd)\"\n          ></pt-button>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay{width:520px;max-width:92vw;height:auto!important;min-height:unset!important;max-height:none!important;display:block!important;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{display:block!important;flex:unset!important;flex-grow:0!important;flex-shrink:0!important;flex-basis:auto!important;height:auto!important;min-height:unset!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important;border-top-left-radius:18px;border-top-right-radius:18px}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-confirm-dialog-message{display:block!important;flex:unset!important;height:auto!important;min-height:unset!important;max-height:none!important;margin:0!important;padding:0!important;width:100%!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{display:block!important;flex:unset!important;flex-grow:0!important;flex-shrink:0!important;flex-basis:auto!important;height:auto!important;min-height:unset!important;max-height:none!important;background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px!important;margin:0!important}.pt-confirm-dialog-card{width:100%;height:auto!important;min-height:unset!important;max-height:none!important;border-radius:18px 18px 0 0;overflow:hidden}.pt-confirm-dialog-card-top{height:auto!important;min-height:unset!important;max-height:none!important;padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .pt-confirm-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .pt-confirm-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .pt-confirm-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .pt-confirm-dialog-card{background-color:#e0f2fe}.pt-confirm-dialog-icon-wrapper{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:18px;box-sizing:border-box}.pt-confirm-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-confirm-dialog-message{font-size:18px;line-height:1.5;color:#4b5563;margin:0}.pt-confirm-dialog-footer-buttons{display:flex;justify-content:center;align-items:center;gap:16px}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button i.pi{margin-right:.5rem}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .p-dialog-footer .p-button:hover{background:#fef2f2!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button:hover{background:#fffbeb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button:hover{background:#f0fdf4!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}@media(max-width:768px){::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay{width:calc(100vw - 2rem)!important;max-width:calc(100vw - 2rem)!important}.pt-confirm-dialog-card-top{padding:24px}.pt-confirm-dialog-icon-wrapper{width:48px;height:48px;min-width:48px;margin-right:14px}.pt-confirm-dialog-title{font-size:19px}.pt-confirm-dialog-message{font-size:16px}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-confirm-dialog-footer-buttons{gap:10px;flex-wrap:wrap}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ConfirmationService }, { type: i0.Renderer2 }], propDecorators: { dialogConfig: [{
+            args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 24px 60px #0f172a4d!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:#fff;overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid;box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:#ffffffd9;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:#fff;color:#0f172a;transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:#fff;box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ConfirmationService }], propDecorators: { dialogConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
@@ -5199,9 +5541,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }], projectedFormBuilder: [{
                 type: ContentChild,
                 args: [PTFormBuilderComponent]
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
-// src/app/shared/pt-confirm-dialog/pt-confirm-dialog.module.ts
 class PTConfirmDialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogModule, declarations: [PTConfirmDialogComponent], imports: [CommonModule, ConfirmDialogModule, PTButtonModule], exports: [PTConfirmDialogComponent] }); }
@@ -5449,6 +5793,7 @@ class NgPrimeToolsModule {
             PTSwitchInputModule,
             PTTextAreaInputModule,
             PTTextInputModule,
+            PTMultiSelectModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -5486,6 +5831,7 @@ class NgPrimeToolsModule {
             PTSwitchInputModule,
             PTTextAreaInputModule,
             PTTextInputModule,
+            PTMultiSelectModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -5527,6 +5873,7 @@ class NgPrimeToolsModule {
             PTSwitchInputModule,
             PTTextAreaInputModule,
             PTTextInputModule,
+            PTMultiSelectModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -5564,6 +5911,7 @@ class NgPrimeToolsModule {
             PTSwitchInputModule,
             PTTextAreaInputModule,
             PTTextInputModule,
+            PTMultiSelectModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -5610,6 +5958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTSwitchInputModule,
                         PTTextAreaInputModule,
                         PTTextInputModule,
+                        PTMultiSelectModule,
                         // Dashboard
                         PTMetricCardModule,
                         PTMetricCardGroupModule,
@@ -5650,6 +5999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTSwitchInputModule,
                         PTTextAreaInputModule,
                         PTTextInputModule,
+                        PTMultiSelectModule,
                         // Dashboard
                         PTMetricCardModule,
                         PTMetricCardGroupModule,
@@ -6111,5 +6461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map