ng-prime-tools 1.1.6 → 1.1.8

package/fesm2022/ng-prime-tools.mjs

@@ -1460,24 +1460,22 @@ class PTAdvancedPrimeTableComponent {
         }
         const height = this.getCellHeight();
         if (height) {
-            styles['height'] = height;
-            styles['max-height'] = height;
-            styles['line-height'] = height;
+            styles['min-height'] = height;
         }
         styles['padding'] = this.getColumnCellPadding(col);
         styles['box-sizing'] = 'border-box';
+        styles['vertical-align'] = 'top';
         return styles;
     }
     getHeaderCellStyle(col) {
         const styles = {
             padding: this.getColumnCellPadding(col),
             boxSizing: 'border-box',
+            verticalAlign: 'middle',
         };
         const height = this.getCellHeight();
         if (height) {
-            styles['height'] = height;
-            styles['max-height'] = height;
-            styles['line-height'] = height;
+            styles['min-height'] = height;
         }
         return styles;
     }
@@ -1485,21 +1483,20 @@ class PTAdvancedPrimeTableComponent {
         const styles = {
             padding: this.cellPadding?.trim() || '0px',
             boxSizing: 'border-box',
+            verticalAlign: 'top',
         };
         const height = this.getCellHeight();
         if (height) {
-            styles['height'] = height;
-            styles['max-height'] = height;
-            styles['line-height'] = height;
+            styles['min-height'] = height;
         }
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", showRowMoveArrows: "showRowMoveArrows", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange", filteredData: "filteredData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:auto;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th{white-space:normal;overflow-wrap:break-word}.pt-advanced-prime-table td{white-space:nowrap}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:center;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:160px}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:120px;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;gap:.5rem;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", showRowMoveArrows: "showRowMoveArrows", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange", filteredData: "filteredData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data)\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"initEditableRow(data)\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"saveEditableRow(data)\"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"cancelEditableRow(data)\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:auto;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th{white-space:normal;overflow-wrap:break-word}.pt-advanced-prime-table td{white-space:nowrap}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:center;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:160px}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:120px;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;gap:.5rem;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data)\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"initEditableRow(data)\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"saveEditableRow(data)\"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"cancelEditableRow(data)\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -1580,9 +1577,6 @@ 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();
@@ -1612,7 +1606,8 @@ class PTMultiSelectComponent {
         return `pt-multiselect-${this.controlName}`;
     }
     get resolvedHidden() {
-        return this.formField?.hidden ?? this.config?.hidden ?? false;
+        const hidden = this.formField?.hidden ?? this.config?.hidden;
+        return this.resolveHiddenValue(hidden);
     }
     get resolvedLabel() {
         return this.formField?.label || this.config?.label;
@@ -1629,10 +1624,10 @@ class PTMultiSelectComponent {
             'Select options');
     }
     get resolvedOptionLabel() {
-        return this.config?.optionLabel || 'label';
+        return this.formField?.optionLabel || this.config?.optionLabel || 'label';
     }
     get resolvedOptionValue() {
-        return this.config?.optionValue || 'value';
+        return this.formField?.optionValue || this.config?.optionValue || 'value';
     }
     get resolvedRequired() {
         return this.formField?.required ?? this.config?.required ?? false;
@@ -1644,19 +1639,45 @@ class PTMultiSelectComponent {
         return this.formField?.errorText || this.config?.errorText;
     }
     get resolvedFilter() {
-        return this.config?.filter === true;
+        return this.formField?.filter === true || this.config?.filter === true;
     }
     get resolvedFilterBy() {
-        return this.config?.filterBy || this.resolvedOptionLabel;
+        return (this.formField?.filterBy ||
+            this.config?.filterBy ||
+            this.resolvedOptionLabel);
     }
     get resolvedDisplay() {
-        return this.config?.display || 'comma';
+        return this.formField?.display || this.config?.display || 'comma';
     }
     get resolvedMaxSelectedLabels() {
-        return this.config?.maxSelectedLabels ?? 3;
+        return (this.formField?.maxSelectedLabels ?? this.config?.maxSelectedLabels ?? 3);
     }
     get resolvedSelectedItemsLabel() {
-        return this.config?.selectedItemsLabel || '{0} items selected';
+        return (this.formField?.selectedItemsLabel ||
+            this.config?.selectedItemsLabel ||
+            '{0} items selected');
+    }
+    getErrorMessage() {
+        const control = this.activeFormGroup.get(this.controlName);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = Object.keys(control.errors)[0];
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField?.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.resolvedErrorText) {
+            return this.resolvedErrorText;
+        }
+        const label = this.resolvedLabel || this.controlName;
+        if (control.hasError('required')) {
+            return `${label} is required`;
+        }
+        return `${label} is invalid`;
     }
     setupControl(forceValueFromConfig) {
         const name = this.controlName;
@@ -1665,23 +1686,35 @@ class PTMultiSelectComponent {
         }
         let control = this.activeFormGroup.get(name);
         if (!control) {
-            control = new FormControl(this.getInitialValue());
+            control = new FormControl(this.getInitialValue(), {
+                nonNullable: true,
+            });
             this.activeFormGroup.addControl(name, control);
         }
         else if (forceValueFromConfig) {
-            control.setValue(this.getInitialValue(), { emitEvent: false });
+            control.setValue(this.getInitialValue(), {
+                emitEvent: false,
+            });
         }
         else if (!this.formGroup && this.value !== undefined) {
-            control.setValue(this.normalizeValue(this.value), { emitEvent: false });
+            control.setValue(this.normalizeValue(this.value), {
+                emitEvent: false,
+            });
         }
         control.setValidators(this.getValidators());
         if (this.resolvedDisabled) {
-            control.disable({ emitEvent: false });
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
         this.valueChangesSubscription?.unsubscribe();
         this.valueChangesSubscription = control.valueChanges.subscribe((selectedValues) => {
             const normalizedValues = this.normalizeValue(selectedValues);
@@ -1693,7 +1726,7 @@ class PTMultiSelectComponent {
         if (this.formField?.value !== undefined) {
             return this.normalizeValue(this.formField.value);
         }
-        if (this.value !== undefined && Array.isArray(this.value)) {
+        if (Array.isArray(this.value)) {
             return this.normalizeValue(this.value);
         }
         return this.normalizeValue(this.config?.value);
@@ -1703,39 +1736,42 @@ class PTMultiSelectComponent {
         if (this.resolvedRequired) {
             validators.push(Validators.required);
         }
+        if (Array.isArray(this.formField?.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
-    /**
-     * Le MultiSelect doit manipuler un tableau d'identifiants primitifs,
-     * pas des objets complets, pour éviter les problèmes de référence.
-     */
     normalizeValue(value) {
-        if (!Array.isArray(value)) {
+        if (!Array.isArray(value) || value.length === 0) {
             return [];
         }
-        if (value.length === 0) {
-            return [];
-        }
-        if (typeof value[0] === 'number' || typeof value[0] === 'string') {
-            return value;
+        if (value.every((item) => typeof item === 'number' ||
+            typeof item === 'string' ||
+            typeof item === 'boolean')) {
+            return [...value];
         }
+        const optionValue = this.resolvedOptionValue;
         return value
             .map((item) => {
-            const optionValue = this.resolvedOptionValue;
-            if (item?.[optionValue] !== undefined) {
+            if (item === null || item === undefined) {
+                return null;
+            }
+            if (typeof item !== 'object') {
+                return item;
+            }
+            if (item[optionValue] !== undefined) {
                 return item[optionValue];
             }
-            return item?.value ?? item?.id ?? null;
+            return item.value ?? item.id ?? null;
         })
             .filter((item) => item !== null && item !== undefined);
     }
-    getErrorMessage() {
-        const control = this.activeFormGroup.get(this.controlName);
-        if (control?.hasError('required')) {
-            return (this.resolvedErrorText ||
-                `${this.resolvedLabel || this.controlName} is required`);
+    resolveHiddenValue(hidden) {
+        if (typeof hidden === 'function') {
+            return Boolean(hidden(this.activeFormGroup.getRawValue()));
         }
-        return '';
+        return Boolean(hidden);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMultiSelectComponent, isStandalone: false, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [display]=\"resolvedDisplay\"\n      [maxSelectedLabels]=\"resolvedMaxSelectedLabels\"\n      [selectedItemsLabel]=\"resolvedSelectedItemsLabel\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-multiselect{width:100%}.form-field ::ng-deep .p-multiselect.ng-invalid.ng-touched,.form-field ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
@@ -2360,56 +2396,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// projects/ng-prime-tools/src/lib/pt-check-box-input/pt-check-box-input.component.ts
 class PTCheckBoxInputComponent {
     ngOnInit() {
         this.setupControl();
     }
+    ngOnChanges(changes) {
+        if (changes['formGroup'] || changes['formField']) {
+            this.setupControl();
+        }
+    }
     get inputId() {
         return `pt-checkbox-${this.formField?.name || 'field'}`;
     }
+    get errorId() {
+        return `pt-checkbox-error-${this.formField?.name || 'field'}`;
+    }
+    get isInvalid() {
+        const control = this.formGroup?.get(this.formField?.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getErrorMessage() {
+        const control = this.formGroup?.get(this.formField?.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.formField.errorText) {
+            return this.formField.errorText;
+        }
+        const label = this.formField.label?.trim() || this.formField.name;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
     setupControl() {
-        let control = this.formGroup.get(this.formField.name);
+        const name = this.formField?.name;
+        if (!name || !this.formGroup) {
+            return;
+        }
+        let control = this.formGroup.get(name);
         if (!control) {
-            control = new FormControl(null);
-            this.formGroup.addControl(this.formField.name, control);
+            control = new FormControl(this.resolveInitialValue(), {
+                nonNullable: true,
+            });
+            this.formGroup.addControl(name, control);
         }
-        const validators = this.getValidators();
-        control.setValidators(validators);
+        control.setValidators(this.getValidators());
         if (this.formField.disabled) {
-            control.disable({ emitEvent: false });
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
+    }
+    resolveInitialValue() {
+        const value = this.formField.value;
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        return false;
     }
     getValidators() {
         const validators = [];
         if (this.formField.required) {
-            validators.push(this.requireChoiceValidator());
+            validators.push(Validators.requiredTrue);
+        }
+        if (Array.isArray(this.formField.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
         }
         return validators;
     }
-    requireChoiceValidator() {
-        return (control) => {
-            return control.value !== null && control.value !== undefined
-                ? null
-                : { requiredChoice: true };
-        };
-    }
-    getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
-        if (control?.errors?.['requiredChoice']) {
-            return this.formField.errorText || `${this.formField.label} is required`;
-        }
-        return '';
+    resolveFirstErrorKey(errors) {
+        const priority = ['required'];
+        return (priority.find((key) => errors[key] !== undefined) ||
+            Object.keys(errors)[0]);
     }
     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\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"] }] }); }
+    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" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-check-box-input/pt-check-box-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    'max-width': formField.width || '100%',\n  }\"\n>\n  <div class=\"checkbox-container\">\n    <p-checkbox\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [binary]=\"true\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n    ></p-checkbox>\n\n    @if (formField.label) {\n      <label class=\"checkbox-label\" [for]=\"inputId\">\n        {{ formField.label }}\n\n        @if (formField.required) {\n          <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n        }\n      </label>\n    }\n  </div>\n\n  @if (isInvalid) {\n    <div class=\"error-container\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"p-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.checkbox-label{min-width:0;cursor:pointer;font-size:1rem;font-weight:600;overflow-wrap:anywhere}.required-indicator{margin-left:.2rem;color:#ef4444}.form-field-invalid ::ng-deep .p-checkbox-box{border-color:#ef4444!important}.error-container{display:flex;align-items:flex-start;gap:.35rem;width:100%;min-width:0;margin-top:.35rem;color:#ef4444}.error-container .pi{flex:0 0 auto;margin-top:.1rem;font-size:.8rem}.p-error{min-width:0;color:inherit;font-size:.8rem;overflow-wrap:anywhere}\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$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\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"] }]
+            args: [{ selector: 'pt-check-box-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-check-box-input/pt-check-box-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    'max-width': formField.width || '100%',\n  }\"\n>\n  <div class=\"checkbox-container\">\n    <p-checkbox\n      [inputId]=\"inputId\"\n      [name]=\"formField.name\"\n      [formControlName]=\"formField.name\"\n      [binary]=\"true\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n    ></p-checkbox>\n\n    @if (formField.label) {\n      <label class=\"checkbox-label\" [for]=\"inputId\">\n        {{ formField.label }}\n\n        @if (formField.required) {\n          <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n        }\n      </label>\n    }\n  </div>\n\n  @if (isInvalid) {\n    <div class=\"error-container\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"p-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.checkbox-label{min-width:0;cursor:pointer;font-size:1rem;font-weight:600;overflow-wrap:anywhere}.required-indicator{margin-left:.2rem;color:#ef4444}.form-field-invalid ::ng-deep .p-checkbox-box{border-color:#ef4444!important}.error-container{display:flex;align-items:flex-start;gap:.35rem;width:100%;min-width:0;margin-top:.35rem;color:#ef4444}.error-container .pi{flex:0 0 auto;margin-top:.1rem;font-size:.8rem}.p-error{min-width:0;color:inherit;font-size:.8rem;overflow-wrap:anywhere}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2544,12 +2633,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+// projects/ng-prime-tools/src/lib/pt-date-input/pt-date-input.component.ts
 class PTDateInputComponent {
     constructor(dateService) {
         this.dateService = dateService;
-        /**
-         * Two-way standalone value.
-         */
         this.value = null;
         this.valueChange = new EventEmitter();
         this.dateChange = new EventEmitter();
@@ -2582,8 +2669,15 @@ class PTDateInputComponent {
     get inputId() {
         return `pt-date-${this.controlName}`;
     }
+    get labelId() {
+        return `pt-date-label-${this.controlName}`;
+    }
+    get errorId() {
+        return `pt-date-error-${this.controlName}`;
+    }
     get resolvedHidden() {
-        return this.formField?.hidden ?? this.config?.hidden ?? false;
+        const hidden = this.formField?.hidden ?? this.config?.hidden;
+        return this.resolveHiddenValue(hidden);
     }
     get resolvedLabel() {
         return this.formField?.label || this.config?.label;
@@ -2629,12 +2723,47 @@ class PTDateInputComponent {
     get resolvedErrorText() {
         return this.formField?.errorText || this.config?.errorText;
     }
+    get isInvalid() {
+        const control = this.activeFormGroup.get(this.controlName);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getErrorMessage() {
+        const control = this.activeFormGroup.get(this.controlName);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField?.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.resolvedErrorText) {
+            return this.resolvedErrorText;
+        }
+        const label = this.resolvedLabel || this.controlName;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            case 'minDate':
+                return `${label} must be on or after ${this.resolvedMinValue}`;
+            case 'maxDate':
+                return `${label} must be on or before ${this.resolvedMaxValue}`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
     initializeComponent() {
         this.defaultDateFormat = this.dateService.assignDefaultDateFormat(this.resolvedDateInputType, this.formField?.dateFormat || this.config?.dateFormat);
-        this.setupControl();
+        this.defaultPlaceholder = getDefaultPlaceholder(this.resolvedDateInputType);
         this.initializeDateLimits();
         this.validateConfiguration();
-        this.defaultPlaceholder = getDefaultPlaceholder(this.resolvedDateInputType);
+        this.setupControl();
     }
     setupControl() {
         const name = this.controlName;
@@ -2646,19 +2775,27 @@ class PTDateInputComponent {
             control = new FormControl(this.getInitialValue());
             this.activeFormGroup.addControl(name, control);
         }
-        if (!this.formGroup &&
+        else if (!this.formGroup &&
             this.value !== undefined &&
             control.value !== this.value) {
-            control.setValue(this.value, { emitEvent: false });
+            control.setValue(this.value, {
+                emitEvent: false,
+            });
         }
         control.setValidators(this.getValidators());
         if (this.resolvedDisabled) {
-            control.disable({ emitEvent: false });
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
         this.valueChangesSubscription?.unsubscribe();
         this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
             this.valueChange.emit(selectedValue);
@@ -2689,10 +2826,9 @@ class PTDateInputComponent {
         catch (error) {
             if (error instanceof Error) {
                 console.error(error.message);
+                return;
             }
-            else {
-                console.error('An unknown error occurred.');
-            }
+            console.error('An unknown error occurred.');
         }
     }
     getValidators() {
@@ -2700,22 +2836,90 @@ class PTDateInputComponent {
         if (this.resolvedRequired) {
             validators.push(Validators.required);
         }
+        if (this.minDate) {
+            validators.push(this.minDateValidator(this.minDate));
+        }
+        if (this.maxDate) {
+            validators.push(this.maxDateValidator(this.maxDate));
+        }
+        if (Array.isArray(this.formField?.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
-    getErrorMessage() {
-        const control = this.activeFormGroup.get(this.controlName);
-        if (control?.hasError('required')) {
-            return (this.resolvedErrorText ||
-                `${this.resolvedLabel || this.controlName} is required`);
+    minDateValidator(minDate) {
+        return (control) => {
+            const dates = this.extractDates(control.value);
+            if (dates.length === 0) {
+                return null;
+            }
+            const hasInvalidDate = dates.some((date) => date.getTime() < minDate.getTime());
+            return hasInvalidDate
+                ? {
+                    minDate: {
+                        requiredMinDate: minDate,
+                        actualValue: control.value,
+                    },
+                }
+                : null;
+        };
+    }
+    maxDateValidator(maxDate) {
+        return (control) => {
+            const dates = this.extractDates(control.value);
+            if (dates.length === 0) {
+                return null;
+            }
+            const hasInvalidDate = dates.some((date) => date.getTime() > maxDate.getTime());
+            return hasInvalidDate
+                ? {
+                    maxDate: {
+                        requiredMaxDate: maxDate,
+                        actualValue: control.value,
+                    },
+                }
+                : null;
+        };
+    }
+    extractDates(value) {
+        if (value === null || value === undefined || value === '') {
+            return [];
         }
-        return '';
+        const values = Array.isArray(value) ? value : [value];
+        return values
+            .map((item) => this.convertToDate(item))
+            .filter((date) => date !== null);
+    }
+    convertToDate(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        const parsedDate = parseDate(value, this.resolvedDateFormat);
+        return parsedDate && !Number.isNaN(parsedDate.getTime())
+            ? parsedDate
+            : null;
+    }
+    resolveFirstErrorKey(errors) {
+        const priority = ['required', 'minDate', 'maxDate'];
+        const prioritizedError = priority.find((key) => errors[key] !== undefined);
+        return prioritizedError || Object.keys(errors)[0];
+    }
+    resolveHiddenValue(hidden) {
+        if (typeof hidden === 'function') {
+            return Boolean(hidden(this.activeFormGroup.getRawValue()));
+        }
+        return Boolean(hidden);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDateInputComponent, deps: [{ token: PTDateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-datepicker\n      class=\"date-input\"\n      styleClass=\"date-input-control\"\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      [readonlyInput]=\"false\"\n      [showButtonBar]=\"true\"\n      [appendTo]=\"'body'\"\n      [panelStyle]=\"{\n        'z-index': 99999,\n      }\"\n      [attr.aria-labelledby]=\"resolvedLabel ? labelId : null\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
 }
 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 (!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"] }]
+            args: [{ selector: 'pt-date-input', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-datepicker\n      class=\"date-input\"\n      styleClass=\"date-input-control\"\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      [readonlyInput]=\"false\"\n      [showButtonBar]=\"true\"\n      [appendTo]=\"'body'\"\n      [panelStyle]=\"{\n        'z-index': 99999,\n      }\"\n      [attr.aria-labelledby]=\"resolvedLabel ? labelId : null\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"] }]
         }], ctorParameters: () => [{ type: PTDateService }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2730,18 +2934,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }] } });
 
+// projects/ng-prime-tools/src/lib/pt-number-input/pt-number-input.component.ts
 class PTNumberInputComponent {
     ngOnInit() {
         this.setupControl();
     }
     ngOnChanges(changes) {
-        if (changes['formField'] && !changes['formField'].firstChange) {
+        if (changes['formGroup'] || changes['formField']) {
             this.setupControl();
         }
     }
     get inputId() {
         return `pt-number-${this.formField?.name || 'field'}`;
     }
+    get errorId() {
+        return `pt-number-error-${this.formField?.name || 'field'}`;
+    }
+    get isInvalid() {
+        const control = this.formGroup?.get(this.formField?.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.formField.errorText) {
+            return this.formField.errorText;
+        }
+        const label = this.formField.label?.trim() || this.formField.name;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            case 'min': {
+                const minValue = control.getError('min')?.min ?? this.formField.minValue;
+                return `${label} must be at least ${minValue}`;
+            }
+            case 'max': {
+                const maxValue = control.getError('max')?.max ?? this.formField.maxValue;
+                return `${label} must be at most ${maxValue}`;
+            }
+            case 'pattern':
+                return `${label} is invalid`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
     setupControl() {
         const name = this.formField?.name;
         if (!name || !this.formGroup) {
@@ -2749,24 +2998,30 @@ class PTNumberInputComponent {
         }
         let control = this.formGroup.get(name);
         if (!control) {
-            control = new FormControl(this.formField?.value ?? null);
+            control = new FormControl(this.formField.value ?? null);
             this.formGroup.addControl(name, control);
         }
         control.setValidators(this.getValidators());
-        if (this.formField?.disabled) {
-            control.disable({ emitEvent: false });
+        if (this.formField.disabled) {
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
     }
     getValidators() {
         const validators = [];
-        if (this.formField?.required) {
+        if (this.formField.required) {
             validators.push(Validators.required);
         }
-        if (this.formField?.minValue !== undefined &&
+        if (this.formField.minValue !== undefined &&
             this.formField.minValue !== null) {
             const minValue = Number(this.formField.minValue);
             if (!Number.isNaN(minValue)) {
@@ -2776,7 +3031,7 @@ class PTNumberInputComponent {
                 console.error(`Invalid minValue: ${this.formField.minValue} is not a number.`);
             }
         }
-        if (this.formField?.maxValue !== undefined &&
+        if (this.formField.maxValue !== undefined &&
             this.formField.maxValue !== null) {
             const maxValue = Number(this.formField.maxValue);
             if (!Number.isNaN(maxValue)) {
@@ -2786,47 +3041,41 @@ class PTNumberInputComponent {
                 console.error(`Invalid maxValue: ${this.formField.maxValue} is not a number.`);
             }
         }
-        if (this.formField?.inputValidation) {
+        if (this.formField.inputValidation) {
             validators.push(this.validateWithInputValidation(this.formField.inputValidation));
         }
+        else if (this.formField.pattern) {
+            validators.push(Validators.pattern(this.formField.pattern));
+        }
+        if (Array.isArray(this.formField.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
     validateWithInputValidation(inputValidation) {
         return Validators.pattern(new RegExp(inputValidation));
     }
-    getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
-        if (control?.hasError('required')) {
-            return this.formField.errorText || `${this.formField.label} is required`;
-        }
-        if (control?.hasError('min')) {
-            return `${this.formField.label} must be at least ${this.formField.minValue}`;
-        }
-        if (control?.hasError('max')) {
-            return `${this.formField.label} must be at most ${this.formField.maxValue}`;
-        }
-        if (control?.hasError('pattern')) {
-            return `${this.formField.label} is invalid`;
-        }
-        return '';
+    resolveFirstErrorKey(errors) {
+        const priority = ['required', 'min', 'max', 'pattern'];
+        return (priority.find((key) => errors[key] !== undefined) ||
+            Object.keys(errors)[0]);
     }
     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\" 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"] }] }); }
+    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: "<!-- projects/ng-prime-tools/src/lib/pt-number-input/pt-number-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    'max-width': formField.width || '100%',\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  <p-inputGroup class=\"number-input-group\">\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\" aria-hidden=\"true\"></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        class=\"number-input\"\n        styleClass=\"number-input-control\"\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        [min]=\"\n          formField.minValue !== undefined && formField.minValue !== null\n            ? +formField.minValue\n            : undefined\n        \"\n        [max]=\"\n          formField.maxValue !== undefined && formField.maxValue !== null\n            ? +formField.maxValue\n            : undefined\n        \"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></p-inputNumber>\n    }\n\n    @if (formField.iconPosition === \"right\") {\n      <p-inputNumber\n        class=\"number-input\"\n        styleClass=\"number-input-control\"\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        [min]=\"\n          formField.minValue !== undefined && formField.minValue !== null\n            ? +formField.minValue\n            : undefined\n        \"\n        [max]=\"\n          formField.maxValue !== undefined && formField.maxValue !== null\n            ? +formField.maxValue\n            : undefined\n        \"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></p-inputNumber>\n\n      @if (formField.iconClass || formField.currency) {\n        <p-inputGroupAddon>\n          @if (formField.iconClass) {\n            <i [ngClass]=\"formField.iconClass\" aria-hidden=\"true\"></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 (isInvalid) {\n    <div class=\"error-container\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"field-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:600}.required-indicator{margin-left:.2rem;color:#ef4444}.number-input-group{display:flex;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input-group.p-inputgroup,:host ::ng-deep .number-input-group .p-inputgroup{display:flex;width:100%;min-width:0;max-width:100%}.number-input{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input-control,:host ::ng-deep .number-input.p-inputnumber,:host ::ng-deep .number-input .p-inputnumber{flex:1 1 auto;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input .p-inputnumber-input{width:100%;min-width:0}:host ::ng-deep .p-inputgroup-addon{flex:0 0 auto}.form-field-invalid ::ng-deep .p-inputnumber-input{border-color:#ef4444!important}.error-container{display:flex;align-items:flex-start;gap:.35rem;margin-top:.35rem;color:#ef4444}.error-container .pi{flex:0 0 auto;margin-top:.1rem;font-size:.8rem}.field-error{min-width:0;color:inherit;font-size:.8rem;overflow-wrap:anywhere}\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\" 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"] }]
+            args: [{ selector: 'pt-number-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-number-input/pt-number-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    'max-width': formField.width || '100%',\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  <p-inputGroup class=\"number-input-group\">\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\" aria-hidden=\"true\"></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        class=\"number-input\"\n        styleClass=\"number-input-control\"\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        [min]=\"\n          formField.minValue !== undefined && formField.minValue !== null\n            ? +formField.minValue\n            : undefined\n        \"\n        [max]=\"\n          formField.maxValue !== undefined && formField.maxValue !== null\n            ? +formField.maxValue\n            : undefined\n        \"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></p-inputNumber>\n    }\n\n    @if (formField.iconPosition === \"right\") {\n      <p-inputNumber\n        class=\"number-input\"\n        styleClass=\"number-input-control\"\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        [min]=\"\n          formField.minValue !== undefined && formField.minValue !== null\n            ? +formField.minValue\n            : undefined\n        \"\n        [max]=\"\n          formField.maxValue !== undefined && formField.maxValue !== null\n            ? +formField.maxValue\n            : undefined\n        \"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></p-inputNumber>\n\n      @if (formField.iconClass || formField.currency) {\n        <p-inputGroupAddon>\n          @if (formField.iconClass) {\n            <i [ngClass]=\"formField.iconClass\" aria-hidden=\"true\"></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 (isInvalid) {\n    <div class=\"error-container\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"field-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:600}.required-indicator{margin-left:.2rem;color:#ef4444}.number-input-group{display:flex;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input-group.p-inputgroup,:host ::ng-deep .number-input-group .p-inputgroup{display:flex;width:100%;min-width:0;max-width:100%}.number-input{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input-control,:host ::ng-deep .number-input.p-inputnumber,:host ::ng-deep .number-input .p-inputnumber{flex:1 1 auto;width:100%;min-width:0;max-width:100%}:host ::ng-deep .number-input .p-inputnumber-input{width:100%;min-width:0}:host ::ng-deep .p-inputgroup-addon{flex:0 0 auto}.form-field-invalid ::ng-deep .p-inputnumber-input{border-color:#ef4444!important}.error-container{display:flex;align-items:flex-start;gap:.35rem;margin-top:.35rem;color:#ef4444}.error-container .pi{flex:0 0 auto;margin-top:.1rem;font-size:.8rem}.field-error{min-width:0;color:inherit;font-size:.8rem;overflow-wrap:anywhere}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
             }] } });
 
+// projects/ng-prime-tools/src/lib/pt-switch-input/pt-switch-input.component.ts
 class PTSwitchInputComponent {
     constructor() {
-        /**
-         * Two-way standalone value.
-         */
         this.value = null;
         this.valueChange = new EventEmitter();
         this.switchChange = new EventEmitter();
@@ -2859,7 +3108,8 @@ class PTSwitchInputComponent {
         return `pt-switch-label-${this.controlName}`;
     }
     get resolvedHidden() {
-        return this.formField?.hidden ?? this.config?.hidden ?? false;
+        const hidden = this.formField?.hidden ?? this.config?.hidden;
+        return this.resolveHiddenValue(hidden);
     }
     get resolvedLabel() {
         return this.formField?.label || this.config?.label;
@@ -2876,6 +3126,28 @@ class PTSwitchInputComponent {
     get resolvedErrorText() {
         return this.formField?.errorText || this.config?.errorText;
     }
+    getErrorMessage() {
+        const control = this.activeFormGroup.get(this.controlName);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = Object.keys(control.errors)[0];
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField?.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.resolvedErrorText) {
+            return this.resolvedErrorText;
+        }
+        const label = this.resolvedLabel || this.controlName;
+        if (control.hasError('requiredChoice')) {
+            return `${label} is required`;
+        }
+        return `${label} is invalid`;
+    }
     setupControl() {
         const name = this.controlName;
         if (!name) {
@@ -2889,16 +3161,24 @@ class PTSwitchInputComponent {
             this.activeFormGroup.addControl(name, control);
         }
         else if (!this.formGroup && this.hasExplicitFieldValue(this.value)) {
-            control.setValue(this.value, { emitEvent: false });
+            control.setValue(this.value, {
+                emitEvent: false,
+            });
         }
         control.setValidators(this.getValidators());
         if (this.resolvedDisabled) {
-            control.disable({ emitEvent: false });
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
         this.valueChangesSubscription?.unsubscribe();
         this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
             this.valueChange.emit(selectedValue);
@@ -2922,22 +3202,26 @@ class PTSwitchInputComponent {
         if (this.resolvedRequired) {
             validators.push(this.requireChoiceValidator());
         }
+        if (Array.isArray(this.formField?.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
     requireChoiceValidator() {
         return (control) => {
             return control.value !== null && control.value !== undefined
                 ? null
-                : { requiredChoice: true };
+                : {
+                    requiredChoice: true,
+                };
         };
     }
-    getErrorMessage() {
-        const control = this.activeFormGroup.get(this.controlName);
-        if (control?.errors?.['requiredChoice']) {
-            return (this.resolvedErrorText ||
-                `${this.resolvedLabel || this.controlName} is required`);
+    resolveHiddenValue(hidden) {
+        if (typeof hidden === 'function') {
+            return Boolean(hidden(this.activeFormGroup.getRawValue()));
         }
-        return '';
+        return Boolean(hidden);
     }
     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", config: "config", value: "value" }, outputs: { valueChange: "valueChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"controlName\"\n        [ariaLabelledBy]=\"labelId\"\n      ></p-toggleswitch>\n\n      @if (resolvedLabel) {\n        <label [id]=\"labelId\" [for]=\"inputId\" class=\"switch-label\">\n          {{ resolvedLabel }}\n        </label>\n      }\n    </div>\n\n    @if (\n      activeFormGroup.get(controlName)?.errors &&\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}.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"] }] }); }
@@ -2959,6 +3243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }] } });
 
+// projects/ng-prime-tools/src/lib/pt-text-area-input/pt-text-area-input.component.ts
 class PTTextAreaInputComponent {
     constructor() {
         this.characterCount = 0;
@@ -2968,14 +3253,63 @@ class PTTextAreaInputComponent {
         this.updateCharacterCount();
     }
     ngOnChanges(changes) {
-        if (changes['formField'] && !changes['formField'].firstChange) {
+        if (changes['formGroup'] || changes['formField']) {
             this.setupControl();
             this.updateCharacterCount();
         }
     }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
     get inputId() {
         return `pt-textarea-${this.formField?.name || 'field'}`;
     }
+    get errorId() {
+        return `pt-textarea-error-${this.formField?.name || 'field'}`;
+    }
+    get isInvalid() {
+        const control = this.formGroup?.get(this.formField?.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.formField.errorText) {
+            return this.formField.errorText;
+        }
+        const label = this.formField.label?.trim() || this.formField.name;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            case 'minlength': {
+                const requiredLength = control.getError('minlength')?.requiredLength ??
+                    this.formField.minLength;
+                return `${label} must be at least ${requiredLength} characters long`;
+            }
+            case 'maxlength': {
+                const requiredLength = control.getError('maxlength')?.requiredLength ??
+                    this.formField.maxLength;
+                return `${label} must be at most ${requiredLength} characters long`;
+            }
+            case 'pattern':
+                return `${label} is invalid`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
     setupControl() {
         const name = this.formField?.name;
         if (!name || !this.formGroup) {
@@ -2983,18 +3317,25 @@ class PTTextAreaInputComponent {
         }
         let control = this.formGroup.get(name);
         if (!control) {
-            control = new FormControl(this.formField?.value ?? null);
+            control = new FormControl(this.formField.value ?? null);
             this.formGroup.addControl(name, control);
         }
         control.setValidators(this.getValidators());
-        if (this.formField?.disabled) {
-            control.disable({ emitEvent: false });
+        if (this.formField.disabled) {
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
+            control.enable({
+                emitEvent: false,
+            });
         }
-        control.updateValueAndValidity({ emitEvent: false });
-        control.valueChanges.subscribe(() => {
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe(() => {
             this.updateCharacterCount();
         });
     }
@@ -3005,55 +3346,55 @@ class PTTextAreaInputComponent {
             return;
         }
         const value = control.value;
-        this.characterCount = value ? String(value).length : 0;
+        this.characterCount =
+            value === null || value === undefined ? 0 : String(value).length;
     }
     getValidators() {
         const validators = [];
-        if (this.formField?.required) {
+        if (this.formField.required) {
             validators.push(Validators.required);
         }
-        if (this.formField?.minLength !== undefined) {
+        if (this.formField.minLength !== undefined &&
+            this.formField.minLength !== null) {
             validators.push(Validators.minLength(this.formField.minLength));
         }
-        if (this.formField?.maxLength !== undefined) {
+        if (this.formField.maxLength !== undefined &&
+            this.formField.maxLength !== null) {
             validators.push(Validators.maxLength(this.formField.maxLength));
         }
-        if (this.formField?.inputValidation) {
+        if (this.formField.inputValidation) {
             validators.push(this.validateWithInputValidation(this.formField.inputValidation));
         }
+        else if (this.formField.pattern) {
+            validators.push(Validators.pattern(this.formField.pattern));
+        }
+        if (Array.isArray(this.formField.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
     validateWithInputValidation(inputValidation) {
         return Validators.pattern(new RegExp(inputValidation));
     }
-    getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
-        if (control?.hasError('required')) {
-            return this.formField.errorText || `${this.formField.label} is required`;
-        }
-        if (control?.hasError('minlength')) {
-            return `${this.formField.label} must be at least ${this.formField.minLength} characters long`;
-        }
-        if (control?.hasError('maxlength')) {
-            return `${this.formField.label} must be at most ${this.formField.maxLength} characters long`;
-        }
-        if (control?.hasError('pattern')) {
-            return `${this.formField.label} is invalid`;
-        }
-        return '';
+    resolveFirstErrorKey(errors) {
+        const priority = ['required', 'minlength', 'maxlength', 'pattern'];
+        return (priority.find((key) => errors[key] !== undefined) ||
+            Object.keys(errors)[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextAreaInputComponent, isStandalone: false, selector: "pt-text-area-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\">{{ formField.label }}</label>\n    }\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === 'left') {\n        @if (formField.iconClass) {\n          <p-inputGroupAddon>\n            <i [ngClass]=\"formField.iconClass\"></i>\n          </p-inputGroupAddon>\n        }\n        <textarea\n          [id]=\"inputId\"\n          pTextarea\n          [formControlName]=\"formField.name\"\n          [rows]=\"formField.rows || 5\"\n          [cols]=\"formField.cols || 30\"\n          [autoResize]=\"formField.autoResize || false\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></textarea>\n      }\n      @if (formField.iconPosition === 'right') {\n        <textarea\n          [id]=\"inputId\"\n          pTextarea\n          [formControlName]=\"formField.name\"\n          [rows]=\"formField.rows || 5\"\n          [cols]=\"formField.cols || 30\"\n          [autoResize]=\"formField.autoResize || false\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></textarea>\n        @if (formField.iconClass) {\n          <p-inputGroupAddon>\n            <i [ngClass]=\"formField.iconClass\"></i>\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\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\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;margin-bottom:1rem}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextAreaInputComponent, isStandalone: false, selector: "pt-text-area-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-area-input/pt-text-area-input.component.html -->\n\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n  }\"\n>\n  @if (formField.label) {\n    <label [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <p-inputGroup class=\"textarea-input-group\">\n    @if (!formField.iconPosition || formField.iconPosition === \"left\") {\n      @if (formField.iconClass) {\n        <p-inputGroupAddon>\n          <i [ngClass]=\"formField.iconClass\"></i>\n        </p-inputGroupAddon>\n      }\n\n      <textarea\n        class=\"textarea-control\"\n        [id]=\"inputId\"\n        pTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></textarea>\n    }\n\n    @if (formField.iconPosition === \"right\") {\n      <textarea\n        class=\"textarea-control\"\n        [id]=\"inputId\"\n        pTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></textarea>\n\n      @if (formField.iconClass) {\n        <p-inputGroupAddon>\n          <i [ngClass]=\"formField.iconClass\"></i>\n        </p-inputGroupAddon>\n      }\n    }\n  </p-inputGroup>\n\n  <div class=\"form-info-row\">\n    @if (isInvalid) {\n      <small class=\"p-error\" role=\"alert\" [id]=\"errorId\">\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", styles: [":host{display:block;width:100%;min-width:0}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-field{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.form-field label{display:block;width:100%;margin-bottom:.5rem;font-size:1rem;font-weight:700}.textarea-input-group{display:flex;width:100%;min-width:0;max-width:100%}:host ::ng-deep .textarea-input-group.p-inputgroup,:host ::ng-deep .textarea-input-group .p-inputgroup{display:flex;width:100%;min-width:0;max-width:100%}.textarea-control{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%;resize:vertical}:host ::ng-deep .textarea-control.p-textarea,:host ::ng-deep textarea.textarea-control{display:block;flex:1 1 auto;width:100%!important;min-width:0;max-width:100%}:host ::ng-deep .p-inputgroup textarea{flex:1 1 auto;width:100%!important;min-width:0}:host ::ng-deep .p-inputgroup-addon{flex:0 0 auto}.form-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;min-width:0;margin-top:.5rem}.spacer{flex:1 1 auto;min-width:0}.character-counter{flex:0 0 auto;margin-left:auto;color:#888;font-size:.8rem;text-align:right;white-space:nowrap}.p-error{min-width:0;color:#f44336;font-size:.8rem;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextAreaInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-text-area-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\">{{ formField.label }}</label>\n    }\n    <p-inputGroup>\n      @if (!formField.iconPosition || formField.iconPosition === 'left') {\n        @if (formField.iconClass) {\n          <p-inputGroupAddon>\n            <i [ngClass]=\"formField.iconClass\"></i>\n          </p-inputGroupAddon>\n        }\n        <textarea\n          [id]=\"inputId\"\n          pTextarea\n          [formControlName]=\"formField.name\"\n          [rows]=\"formField.rows || 5\"\n          [cols]=\"formField.cols || 30\"\n          [autoResize]=\"formField.autoResize || false\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></textarea>\n      }\n      @if (formField.iconPosition === 'right') {\n        <textarea\n          [id]=\"inputId\"\n          pTextarea\n          [formControlName]=\"formField.name\"\n          [rows]=\"formField.rows || 5\"\n          [cols]=\"formField.cols || 30\"\n          [autoResize]=\"formField.autoResize || false\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [placeholder]=\"formField.placeholder || ''\"\n        ></textarea>\n        @if (formField.iconClass) {\n          <p-inputGroupAddon>\n            <i [ngClass]=\"formField.iconClass\"></i>\n          </p-inputGroupAddon>\n        }\n      }\n    </p-inputGroup>\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\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;margin-bottom:1rem}.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}\n"] }]
+            args: [{ selector: 'pt-text-area-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-area-input/pt-text-area-input.component.html -->\n\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n  }\"\n>\n  @if (formField.label) {\n    <label [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <p-inputGroup class=\"textarea-input-group\">\n    @if (!formField.iconPosition || formField.iconPosition === \"left\") {\n      @if (formField.iconClass) {\n        <p-inputGroupAddon>\n          <i [ngClass]=\"formField.iconClass\"></i>\n        </p-inputGroupAddon>\n      }\n\n      <textarea\n        class=\"textarea-control\"\n        [id]=\"inputId\"\n        pTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></textarea>\n    }\n\n    @if (formField.iconPosition === \"right\") {\n      <textarea\n        class=\"textarea-control\"\n        [id]=\"inputId\"\n        pTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      ></textarea>\n\n      @if (formField.iconClass) {\n        <p-inputGroupAddon>\n          <i [ngClass]=\"formField.iconClass\"></i>\n        </p-inputGroupAddon>\n      }\n    }\n  </p-inputGroup>\n\n  <div class=\"form-info-row\">\n    @if (isInvalid) {\n      <small class=\"p-error\" role=\"alert\" [id]=\"errorId\">\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", styles: [":host{display:block;width:100%;min-width:0}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-field{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.form-field label{display:block;width:100%;margin-bottom:.5rem;font-size:1rem;font-weight:700}.textarea-input-group{display:flex;width:100%;min-width:0;max-width:100%}:host ::ng-deep .textarea-input-group.p-inputgroup,:host ::ng-deep .textarea-input-group .p-inputgroup{display:flex;width:100%;min-width:0;max-width:100%}.textarea-control{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%;resize:vertical}:host ::ng-deep .textarea-control.p-textarea,:host ::ng-deep textarea.textarea-control{display:block;flex:1 1 auto;width:100%!important;min-width:0;max-width:100%}:host ::ng-deep .p-inputgroup textarea{flex:1 1 auto;width:100%!important;min-width:0}:host ::ng-deep .p-inputgroup-addon{flex:0 0 auto}.form-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;width:100%;min-width:0;margin-top:.5rem}.spacer{flex:1 1 auto;min-width:0}.character-counter{flex:0 0 auto;margin-left:auto;color:#888;font-size:.8rem;text-align:right;white-space:nowrap}.p-error{min-width:0;color:#f44336;font-size:.8rem;overflow-wrap:anywhere}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
             }] } });
 
+// projects/ng-prime-tools/src/lib/pt-text-input/pt-text-input.component.ts
 class PTTextInputComponent {
     constructor() {
         this.characterCount = 0;
@@ -3062,38 +3403,27 @@ class PTTextInputComponent {
         this.setupControl();
         this.updateCharacterCount();
     }
+    ngOnChanges(changes) {
+        if (changes['formGroup'] || changes['formField']) {
+            this.setupControl();
+            this.updateCharacterCount();
+        }
+    }
     ngOnDestroy() {
         this.valueChangesSubscription?.unsubscribe();
     }
     get inputId() {
         return `pt-input-${this.formField?.name || 'field'}`;
     }
-    setupControl() {
-        const control = this.formGroup.get(this.formField.name);
-        if (!control) {
-            return;
-        }
-        control.setValidators(this.getValidators());
-        this.valueChangesSubscription?.unsubscribe();
-        if (this.formField.disabled) {
-            control.disable({ emitEvent: false });
-        }
-        else {
-            control.enable({ emitEvent: false });
-            this.valueChangesSubscription = control.valueChanges.subscribe(() => {
-                this.updateCharacterCount();
-            });
-        }
-        control.updateValueAndValidity({ emitEvent: false });
+    get errorId() {
+        return `pt-input-error-${this.formField?.name || 'field'}`;
     }
-    updateCharacterCount() {
-        const control = this.formGroup.get(this.formField.name);
-        if (!control) {
-            this.characterCount = 0;
-            return;
-        }
-        const value = control.value;
-        this.characterCount = value != null ? String(value).length : 0;
+    get isInvalid() {
+        const control = this.formGroup?.get(this.formField?.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
     }
     getInputType() {
         switch (this.formField.type) {
@@ -3116,15 +3446,100 @@ class PTTextInputComponent {
     getPasswordFeedback() {
         return this.formField.feedback ?? false;
     }
+    hasCharacterCounter() {
+        return !this.formField.disabled && this.formField.maxLength !== undefined;
+    }
+    hasInfoRow() {
+        return this.isInvalid || this.hasCharacterCounter();
+    }
+    getErrorMessage() {
+        const control = this.formGroup?.get(this.formField?.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.formField.errorText) {
+            return this.formField.errorText;
+        }
+        const label = this.formField.label?.trim() || this.formField.name;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            case 'email':
+                return `${label} is not a valid email`;
+            case 'minlength': {
+                const requiredLength = control.getError('minlength')?.requiredLength ??
+                    this.formField.minLength;
+                return `${label} must be at least ${requiredLength} characters`;
+            }
+            case 'maxlength': {
+                const requiredLength = control.getError('maxlength')?.requiredLength ??
+                    this.formField.maxLength;
+                return `${label} must be at most ${requiredLength} characters`;
+            }
+            case 'pattern':
+                return `${label} is invalid`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
+    setupControl() {
+        const name = this.formField?.name;
+        if (!name || !this.formGroup) {
+            return;
+        }
+        let control = this.formGroup.get(name);
+        if (!control) {
+            control = new FormControl(this.formField.value ?? null);
+            this.formGroup.addControl(name, control);
+        }
+        control.setValidators(this.getValidators());
+        if (this.formField.disabled) {
+            control.disable({
+                emitEvent: false,
+            });
+        }
+        else {
+            control.enable({
+                emitEvent: false,
+            });
+        }
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe(() => {
+            this.updateCharacterCount();
+        });
+    }
+    updateCharacterCount() {
+        const control = this.formGroup?.get(this.formField?.name);
+        if (!control) {
+            this.characterCount = 0;
+            return;
+        }
+        const value = control.value;
+        this.characterCount =
+            value === null || value === undefined ? 0 : String(value).length;
+    }
     getValidators() {
         const validators = [];
         if (this.formField.required) {
             validators.push(Validators.required);
         }
-        if (this.formField.minLength !== undefined) {
+        if (this.formField.minLength !== undefined &&
+            this.formField.minLength !== null) {
             validators.push(Validators.minLength(this.formField.minLength));
         }
-        if (this.formField.maxLength !== undefined) {
+        if (this.formField.maxLength !== undefined &&
+            this.formField.maxLength !== null) {
             validators.push(Validators.maxLength(this.formField.maxLength));
         }
         if (this.formField.type === FormInputTypeEnum.EMAIL) {
@@ -3133,46 +3548,29 @@ class PTTextInputComponent {
         if (this.formField.inputValidation) {
             validators.push(this.validateWithInputValidation(this.formField.inputValidation));
         }
+        else if (this.formField.pattern) {
+            validators.push(Validators.pattern(this.formField.pattern));
+        }
+        if (Array.isArray(this.formField.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
     validateWithInputValidation(inputValidation) {
         return Validators.pattern(new RegExp(inputValidation));
     }
-    getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
-        if (control?.hasError('required')) {
-            return `${this.formField.label} is required`;
-        }
-        if (control?.hasError('email')) {
-            return `${this.formField.label} is not a valid email`;
-        }
-        if (control?.hasError('minlength')) {
-            return `${this.formField.label} must be at least ${this.formField.minLength} characters`;
-        }
-        if (control?.hasError('maxlength')) {
-            return `${this.formField.label} must be at most ${this.formField.maxLength} characters`;
-        }
-        if (control?.hasError('pattern')) {
-            return `${this.formField.label} is invalid`;
-        }
-        return '';
-    }
-    hasError() {
-        const control = this.formGroup.get(this.formField.name);
-        return !!(control?.invalid && (control.touched || control.dirty));
-    }
-    hasCharacterCounter() {
-        return !this.formField.disabled && this.formField.maxLength !== undefined;
-    }
-    hasInfoRow() {
-        return this.hasError() || this.hasCharacterCounter();
+    resolveFirstErrorKey(errors) {
+        const priority = ['required', 'email', 'minlength', 'maxlength', 'pattern'];
+        return (priority.find((key) => errors[key] !== undefined) ||
+            Object.keys(errors)[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, 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    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-input/pt-text-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"text-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [inputStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          pInputText\n          class=\"pt-text-input\"\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [ngStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    </p-iconField>\n  } @else {\n    @if (isPasswordInput()) {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    } @else {\n      <input\n        pInputText\n        class=\"pt-text-input\"\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [ngStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n      />\n    }\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.required-indicator{margin-left:.2rem;color:#dc2626}.text-icon-field{display:block;width:100%;min-width:0}.pt-text-input{width:100%;min-width:0;box-sizing:border-box}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;min-width:0;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2;overflow-wrap:anywhere}.character-counter{flex:0 0 auto;color:#64748b;font-size:.8rem;font-weight:500;white-space:nowrap}.form-field-invalid .pt-text-input{border-color:#dc2626}:host ::ng-deep .text-icon-field.p-iconfield,:host ::ng-deep .text-icon-field .p-iconfield{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input.p-password,:host ::ng-deep .pt-password-input .p-password{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input .p-password-input,:host ::ng-deep .pt-password-input input{width:100%;min-width:0;box-sizing:border-box}.form-field-invalid ::ng-deep .pt-password-input .p-password-input{border-color:#dc2626}:host ::ng-deep .pt-password-input .p-password-toggle-mask-icon,:host ::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
 }
 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      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    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\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"] }]
+            args: [{ selector: 'pt-text-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-input/pt-text-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"text-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [inputStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          pInputText\n          class=\"pt-text-input\"\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [ngStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    </p-iconField>\n  } @else {\n    @if (isPasswordInput()) {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    } @else {\n      <input\n        pInputText\n        class=\"pt-text-input\"\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [ngStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n      />\n    }\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.required-indicator{margin-left:.2rem;color:#dc2626}.text-icon-field{display:block;width:100%;min-width:0}.pt-text-input{width:100%;min-width:0;box-sizing:border-box}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;min-width:0;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2;overflow-wrap:anywhere}.character-counter{flex:0 0 auto;color:#64748b;font-size:.8rem;font-weight:500;white-space:nowrap}.form-field-invalid .pt-text-input{border-color:#dc2626}:host ::ng-deep .text-icon-field.p-iconfield,:host ::ng-deep .text-icon-field .p-iconfield{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input.p-password,:host ::ng-deep .pt-password-input .p-password{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input .p-password-input,:host ::ng-deep .pt-password-input input{width:100%;min-width:0;box-sizing:border-box}.form-field-invalid ::ng-deep .pt-password-input .p-password-input{border-color:#dc2626}:host ::ng-deep .pt-password-input .p-password-toggle-mask-icon,:host ::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -3216,7 +3614,11 @@ class PTDropdownComponent {
         return `pt-dropdown-label-${this.controlName}`;
     }
     get resolvedHidden() {
-        return this.formField?.hidden ?? this.config?.hidden ?? false;
+        const hidden = this.formField?.hidden;
+        if (typeof hidden === 'function') {
+            return Boolean(hidden(this.activeFormGroup.getRawValue()));
+        }
+        return hidden ?? this.config?.hidden ?? false;
     }
     get resolvedLabel() {
         return this.formField?.label || this.config?.label;
@@ -3428,11 +3830,11 @@ 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", 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"] }] }); }
+    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    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-select\n      class=\"dropdown-input\"\n      styleClass=\"dropdown-input-control\"\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]=\"{\n        baseZIndex: 11000,\n      }\"\n      [ariaLabelledBy]=\"resolvedLabel ? labelId : undefined\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    >\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                  class=\"pt-dropdown-icon-image\"\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  alt=\"\"\n                />\n              }\n\n              @if (iconMeta.type === \"font\") {\n                <i\n                  class=\"pt-dropdown-icon-font\"\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            }\n\n            <span class=\"pt-dropdown-label\">\n              {{ option[resolvedOptionLabel] }}\n            </span>\n          </div>\n        } @else {\n          <span class=\"pt-dropdown-placeholder\">\n            {{ resolvedPlaceholder }}\n          </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?.[resolvedOptionDisabled]\"\n          [ngStyle]=\"{\n            'padding-left': option?.indent || '0rem',\n          }\"\n        >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === \"image\") {\n              <img\n                class=\"pt-dropdown-icon-image\"\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                alt=\"\"\n              />\n            }\n\n            @if (iconMeta.type === \"font\") {\n              <i\n                class=\"pt-dropdown-icon-font\"\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                aria-hidden=\"true\"\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\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </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 (!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"] }]
+            args: [{ selector: 'pt-dropdown', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-select\n      class=\"dropdown-input\"\n      styleClass=\"dropdown-input-control\"\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]=\"{\n        baseZIndex: 11000,\n      }\"\n      [ariaLabelledBy]=\"resolvedLabel ? labelId : undefined\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    >\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                  class=\"pt-dropdown-icon-image\"\n                  [src]=\"iconMeta.imageUrl\"\n                  [ngStyle]=\"iconMeta.imageStyle\"\n                  alt=\"\"\n                />\n              }\n\n              @if (iconMeta.type === \"font\") {\n                <i\n                  class=\"pt-dropdown-icon-font\"\n                  [ngClass]=\"iconMeta.fontIconClass\"\n                  [ngStyle]=\"iconMeta.fontIconStyle\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            }\n\n            <span class=\"pt-dropdown-label\">\n              {{ option[resolvedOptionLabel] }}\n            </span>\n          </div>\n        } @else {\n          <span class=\"pt-dropdown-placeholder\">\n            {{ resolvedPlaceholder }}\n          </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?.[resolvedOptionDisabled]\"\n          [ngStyle]=\"{\n            'padding-left': option?.indent || '0rem',\n          }\"\n        >\n          @if (getResolvedIcon(option); as iconMeta) {\n            @if (iconMeta.type === \"image\") {\n              <img\n                class=\"pt-dropdown-icon-image\"\n                [src]=\"iconMeta.imageUrl\"\n                [ngStyle]=\"iconMeta.imageStyle\"\n                alt=\"\"\n              />\n            }\n\n            @if (iconMeta.type === \"font\") {\n              <i\n                class=\"pt-dropdown-icon-font\"\n                [ngClass]=\"iconMeta.fontIconClass\"\n                [ngStyle]=\"iconMeta.fontIconStyle\"\n                aria-hidden=\"true\"\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\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </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: [{
@@ -3545,18 +3947,25 @@ class PTOtpInputComponent {
             control.setValue(normalizedValue, { emitEvent: false });
         }
     }
+    get labelId() {
+        return `pt-otp-label-${this.formField?.name || 'field'}`;
+    }
+    get errorId() {
+        return `pt-otp-error-${this.formField?.name || 'field'}`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTOtpInputComponent, isStandalone: false, selector: "pt-otp-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 class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <div class=\"otp-input-wrapper\">\n      <p-inputOtp\n        [formControlName]=\"formField.name\"\n        [length]=\"resolvedLength\"\n        [integerOnly]=\"resolvedIntegerOnly\"\n        [mask]=\"resolvedMask\"\n        [readonly]=\"formField.disabled ?? false\"\n        styleClass=\"pt-otp-input\"\n      ></p-inputOtp>\n    </div>\n\n    @if (hasError()) {\n      <div class=\"form-info-row\">\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.otp-input-wrapper{display:flex;width:100%;justify-content:center}.form-info-row{display:flex;min-height:1.35rem;margin-top:.65rem;justify-content:center}.field-error{color:#fca5a5;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\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$6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTOtpInputComponent, isStandalone: false, selector: "pt-otp-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-otp-input/pt-otp-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': hasError(),\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [id]=\"labelId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  <div class=\"otp-input-wrapper\">\n    <p-inputOtp\n      [formControlName]=\"formField.name\"\n      [length]=\"resolvedLength\"\n      [integerOnly]=\"resolvedIntegerOnly\"\n      [mask]=\"resolvedMask\"\n      [readonly]=\"formField.disabled ?? false\"\n      [attr.aria-labelledby]=\"formField.label ? labelId : null\"\n      [attr.aria-describedby]=\"hasError() ? errorId : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : 'false'\"\n      styleClass=\"pt-otp-input\"\n    ></p-inputOtp>\n  </div>\n\n  @if (hasError()) {\n    <div class=\"form-info-row\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"field-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.required-indicator{margin-left:.2rem;color:#ef4444}.otp-input-wrapper{display:flex;width:100%;min-width:0;justify-content:center}.form-info-row{display:flex;align-items:center;min-height:1.35rem;margin-top:.65rem;justify-content:center;gap:.35rem;color:#fca5a5}.form-info-row .pi{font-size:.8rem}.field-error{color:inherit;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;min-width:0;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}.form-field-invalid ::ng-deep .pt-otp-input .p-inputotp-input{border-color:#ef4444}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\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$6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-otp-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 class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <div class=\"otp-input-wrapper\">\n      <p-inputOtp\n        [formControlName]=\"formField.name\"\n        [length]=\"resolvedLength\"\n        [integerOnly]=\"resolvedIntegerOnly\"\n        [mask]=\"resolvedMask\"\n        [readonly]=\"formField.disabled ?? false\"\n        styleClass=\"pt-otp-input\"\n      ></p-inputOtp>\n    </div>\n\n    @if (hasError()) {\n      <div class=\"form-info-row\">\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.otp-input-wrapper{display:flex;width:100%;justify-content:center}.form-info-row{display:flex;min-height:1.35rem;margin-top:.65rem;justify-content:center}.field-error{color:#fca5a5;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\n"] }]
+            args: [{ selector: 'pt-otp-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-otp-input/pt-otp-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': hasError(),\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [id]=\"labelId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  <div class=\"otp-input-wrapper\">\n    <p-inputOtp\n      [formControlName]=\"formField.name\"\n      [length]=\"resolvedLength\"\n      [integerOnly]=\"resolvedIntegerOnly\"\n      [mask]=\"resolvedMask\"\n      [readonly]=\"formField.disabled ?? false\"\n      [attr.aria-labelledby]=\"formField.label ? labelId : null\"\n      [attr.aria-describedby]=\"hasError() ? errorId : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : 'false'\"\n      styleClass=\"pt-otp-input\"\n    ></p-inputOtp>\n  </div>\n\n  @if (hasError()) {\n    <div class=\"form-info-row\" role=\"alert\" [id]=\"errorId\">\n      <i class=\"pi pi-exclamation-circle\" aria-hidden=\"true\"></i>\n\n      <small class=\"field-error\">\n        {{ getErrorMessage() }}\n      </small>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.required-indicator{margin-left:.2rem;color:#ef4444}.otp-input-wrapper{display:flex;width:100%;min-width:0;justify-content:center}.form-info-row{display:flex;align-items:center;min-height:1.35rem;margin-top:.65rem;justify-content:center;gap:.35rem;color:#fca5a5}.form-info-row .pi{font-size:.8rem}.field-error{color:inherit;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;min-width:0;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}.form-field-invalid ::ng-deep .pt-otp-input .p-inputotp-input{border-color:#ef4444}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
             }] } });
 
+// projects/ng-prime-tools/src/lib/pt-password-input/pt-password-input.component.ts
 class PTPasswordInputComponent {
     constructor() {
         this.characterCount = 0;
@@ -3565,96 +3974,154 @@ class PTPasswordInputComponent {
         this.setupControl();
         this.updateCharacterCount();
     }
+    ngOnChanges(changes) {
+        if (changes['formGroup'] || changes['formField']) {
+            this.setupControl();
+            this.updateCharacterCount();
+        }
+    }
     ngOnDestroy() {
         this.valueChangesSubscription?.unsubscribe();
     }
     get inputId() {
         return `pt-password-${this.formField?.name || 'field'}`;
     }
+    get errorId() {
+        return `pt-password-error-${this.formField?.name || 'field'}`;
+    }
+    get isInvalid() {
+        const control = this.formGroup?.get(this.formField?.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getPasswordToggleMask() {
+        return this.formField?.toggleMask ?? true;
+    }
+    getPasswordFeedback() {
+        return this.formField?.feedback ?? false;
+    }
+    hasCharacterCounter() {
+        return !this.formField?.disabled && this.formField?.maxLength !== undefined;
+    }
+    hasInfoRow() {
+        return this.isInvalid || this.hasCharacterCounter();
+    }
+    getErrorMessage() {
+        const control = this.formGroup?.get(this.formField?.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control.errors);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = this.formField.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (this.formField.errorText) {
+            return this.formField.errorText;
+        }
+        const label = this.formField.label?.trim() || this.formField.name;
+        switch (errorKey) {
+            case 'required':
+                return `${label} is required`;
+            case 'minlength': {
+                const requiredLength = control.getError('minlength')?.requiredLength ??
+                    this.formField.minLength;
+                return `${label} must be at least ${requiredLength} characters`;
+            }
+            case 'maxlength': {
+                const requiredLength = control.getError('maxlength')?.requiredLength ??
+                    this.formField.maxLength;
+                return `${label} must be at most ${requiredLength} characters`;
+            }
+            case 'pattern':
+                return `${label} is invalid`;
+            default:
+                return `${label} is invalid`;
+        }
+    }
     setupControl() {
-        const control = this.formGroup.get(this.formField.name);
-        if (!control) {
+        const name = this.formField?.name;
+        if (!name || !this.formGroup) {
             return;
         }
+        let control = this.formGroup.get(name);
+        if (!control) {
+            control = new FormControl(this.formField.value ?? null);
+            this.formGroup.addControl(name, control);
+        }
         control.setValidators(this.getValidators());
-        this.valueChangesSubscription?.unsubscribe();
         if (this.formField.disabled) {
-            control.disable({ emitEvent: false });
+            control.disable({
+                emitEvent: false,
+            });
         }
         else {
-            control.enable({ emitEvent: false });
-            this.valueChangesSubscription = control.valueChanges.subscribe(() => {
-                this.updateCharacterCount();
+            control.enable({
+                emitEvent: false,
             });
         }
-        control.updateValueAndValidity({ emitEvent: false });
+        control.updateValueAndValidity({
+            emitEvent: false,
+        });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe(() => {
+            this.updateCharacterCount();
+        });
     }
     updateCharacterCount() {
-        const control = this.formGroup.get(this.formField.name);
+        const control = this.formGroup?.get(this.formField?.name);
         if (!control) {
             this.characterCount = 0;
             return;
         }
         const value = control.value;
-        this.characterCount = value != null ? String(value).length : 0;
-    }
-    getPasswordToggleMask() {
-        return this.formField.toggleMask ?? true;
-    }
-    getPasswordFeedback() {
-        return this.formField.feedback ?? false;
+        this.characterCount =
+            value === null || value === undefined ? 0 : String(value).length;
     }
     getValidators() {
         const validators = [];
         if (this.formField.required) {
             validators.push(Validators.required);
         }
-        if (this.formField.minLength !== undefined) {
+        if (this.formField.minLength !== undefined &&
+            this.formField.minLength !== null) {
             validators.push(Validators.minLength(this.formField.minLength));
         }
-        if (this.formField.maxLength !== undefined) {
+        if (this.formField.maxLength !== undefined &&
+            this.formField.maxLength !== null) {
             validators.push(Validators.maxLength(this.formField.maxLength));
         }
         if (this.formField.inputValidation) {
             validators.push(this.validateWithInputValidation(this.formField.inputValidation));
         }
+        else if (this.formField.pattern) {
+            validators.push(Validators.pattern(this.formField.pattern));
+        }
+        if (Array.isArray(this.formField.validators) &&
+            this.formField.validators.length > 0) {
+            validators.push(...this.formField.validators);
+        }
         return validators;
     }
     validateWithInputValidation(inputValidation) {
         return Validators.pattern(new RegExp(inputValidation));
     }
-    getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
-        if (control?.hasError('required')) {
-            return this.formField.errorText ?? `${this.formField.label} is required`;
-        }
-        if (control?.hasError('minlength')) {
-            return `${this.formField.label} must be at least ${this.formField.minLength} characters`;
-        }
-        if (control?.hasError('maxlength')) {
-            return `${this.formField.label} must be at most ${this.formField.maxLength} characters`;
-        }
-        if (control?.hasError('pattern')) {
-            return this.formField.errorText ?? `${this.formField.label} is invalid`;
-        }
-        return '';
-    }
-    hasError() {
-        const control = this.formGroup.get(this.formField.name);
-        return !!(control?.invalid && (control.touched || control.dirty));
-    }
-    hasCharacterCounter() {
-        return !this.formField.disabled && this.formField.maxLength !== undefined;
-    }
-    hasInfoRow() {
-        return this.hasError() || this.hasCharacterCounter();
+    resolveFirstErrorKey(errors) {
+        const priority = ['required', 'minlength', 'maxlength', 'pattern'];
+        return (priority.find((key) => errors[key] !== undefined) ||
+            Object.keys(errors)[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPasswordInputComponent, isStandalone: false, selector: "pt-password-input", inputs: { formGroup: "formGroup", formField: "formField" }, 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        <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      </p-iconField>\n    } @else {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [inputStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    }\n\n    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPasswordInputComponent, isStandalone: false, selector: "pt-password-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-password-input/pt-password-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"password-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    </p-iconField>\n  } @else {\n    <p-password\n      [inputId]=\"inputId\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [toggleMask]=\"getPasswordToggleMask()\"\n      [feedback]=\"getPasswordFeedback()\"\n      [attr.name]=\"formField.name\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      [inputStyle]=\"{\n        width: '100%',\n        height: formField.height || 'auto',\n      }\"\n      styleClass=\"pt-password-input\"\n    ></p-password>\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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: PTPasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-password-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        <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      </p-iconField>\n    } @else {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [inputStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    }\n\n    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
+            args: [{ selector: 'pt-password-input', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-password-input/pt-password-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"password-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    </p-iconField>\n  } @else {\n    <p-password\n      [inputId]=\"inputId\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [toggleMask]=\"getPasswordToggleMask()\"\n      [feedback]=\"getPasswordFeedback()\"\n      [attr.name]=\"formField.name\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      [inputStyle]=\"{\n        width: '100%',\n        height: formField.height || 'auto',\n      }\"\n      styleClass=\"pt-password-input\"\n    ></p-password>\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -3693,11 +4160,11 @@ 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: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\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\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- PASSWORD -->\n    @case (FormInputTypeEnum.PASSWORD) {\n      <pt-password-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-password-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\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\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\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\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", "config", "value"], outputs: ["valueChange", "switchChange"] }, { 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"] }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTPasswordInputComponent, selector: "pt-password-input", 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: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\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\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- PASSWORD -->\n    @case (FormInputTypeEnum.PASSWORD) {\n      <pt-password-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-password-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\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\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\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\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: [":host{display:block;width:100%;min-width:0;max-width:100%}.form-field{display:block;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.form-field>pt-text-input,.form-field>pt-password-input,.form-field>pt-number-input,.form-field>pt-text-area-input,.form-field>pt-date-input,.form-field>pt-multi-select,.form-field>pt-dropdown,.form-field>pt-otp-input,.form-field>pt-switch-input{display:block;width:100%;min-width:0;max-width:100%}.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", "config", "value"], outputs: ["valueChange", "switchChange"] }, { 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"] }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTPasswordInputComponent, selector: "pt-password-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\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\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- PASSWORD -->\n    @case (FormInputTypeEnum.PASSWORD) {\n      <pt-password-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-password-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\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\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\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\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"] }]
+            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/pt-form-builder/pt-dynamic-form-field/pt-dynamic-form-field.component.html -->\n\n<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\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\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- PASSWORD -->\n    @case (FormInputTypeEnum.PASSWORD) {\n      <pt-password-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-password-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\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\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\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\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: [":host{display:block;width:100%;min-width:0;max-width:100%}.form-field{display:block;width:100%;min-width:0;max-width:100%;margin-bottom:1rem}.form-field>pt-text-input,.form-field>pt-password-input,.form-field>pt-number-input,.form-field>pt-text-area-input,.form-field>pt-date-input,.form-field>pt-multi-select,.form-field>pt-dropdown,.form-field>pt-otp-input,.form-field>pt-switch-input{display:block;width:100%;min-width:0;max-width:100%}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], form: [{
@@ -3711,7 +4178,10 @@ class PTFormBuilderComponent {
     constructor(fb, cdr) {
         this.fb = fb;
         this.cdr = cdr;
-        this.mainGroup = { fields: [], groups: [] };
+        this.mainGroup = {
+            fields: [],
+            groups: [],
+        };
         this.buttons = [];
         this.inputWidth = '100%';
         this.formWidth = '100%';
@@ -3725,8 +4195,12 @@ class PTFormBuilderComponent {
                 required: 'is required',
                 email: 'is not a valid email address',
                 pattern: 'is invalid',
-                minlength: 'must be at least',
-                maxlength: 'must be at most',
+                minlength: 'must contain at least',
+                maxlength: 'must contain at most',
+                min: 'must be greater than or equal to',
+                max: 'must be less than or equal to',
+                invalid: 'is invalid',
+                characters: 'characters',
             },
             fr: {
                 required: 'est requis',
@@ -3734,6 +4208,10 @@ class PTFormBuilderComponent {
                 pattern: 'est invalide',
                 minlength: 'doit contenir au moins',
                 maxlength: 'doit contenir au plus',
+                min: 'doit être supérieur ou égal à',
+                max: 'doit être inférieur ou égal à',
+                invalid: 'est invalide',
+                characters: 'caractères',
             },
         };
         this.form = this.fb.group({});
@@ -3756,6 +4234,74 @@ class PTFormBuilderComponent {
         }
         return Boolean(hidden);
     }
+    isInvalid(field) {
+        const control = this.form.get(field.name);
+        return Boolean(control &&
+            control.enabled &&
+            control.invalid &&
+            (control.touched || control.dirty));
+    }
+    getErrorMessage(field) {
+        const control = this.form.get(field.name);
+        if (!control?.errors) {
+            return '';
+        }
+        const errorKey = this.resolveFirstErrorKey(control);
+        if (!errorKey) {
+            return '';
+        }
+        const customMessage = field.validationMessages?.[errorKey];
+        if (customMessage) {
+            return customMessage;
+        }
+        if (field.errorText) {
+            return field.errorText;
+        }
+        const fieldLabel = field.label?.trim() || field.name;
+        const messages = this.errorMessages[this.language];
+        switch (errorKey) {
+            case 'required':
+                return `${fieldLabel} ${messages.required}`;
+            case 'email':
+                return `${fieldLabel} ${messages.email}`;
+            case 'pattern':
+                return `${fieldLabel} ${messages.pattern}`;
+            case 'minlength': {
+                const requiredLength = control.getError('minlength')?.requiredLength ?? '';
+                return `${fieldLabel} ${messages.minlength} ${requiredLength} ${messages.characters}`;
+            }
+            case 'maxlength': {
+                const requiredLength = control.getError('maxlength')?.requiredLength ?? '';
+                return `${fieldLabel} ${messages.maxlength} ${requiredLength} ${messages.characters}`;
+            }
+            case 'min': {
+                const minimum = control.getError('min')?.min ?? '';
+                return `${fieldLabel} ${messages.min} ${minimum}`;
+            }
+            case 'max': {
+                const maximum = control.getError('max')?.max ?? '';
+                return `${fieldLabel} ${messages.max} ${maximum}`;
+            }
+            default:
+                return `${fieldLabel} ${messages.invalid}`;
+        }
+    }
+    onSubmit() {
+        this.form.markAllAsTouched();
+        this.form.updateValueAndValidity({
+            emitEvent: false,
+        });
+        if (this.form.invalid) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.formSubmit.emit(this.form.getRawValue());
+    }
+    onClear() {
+        this.form.reset();
+        this.formChange.emit(this.form.getRawValue());
+        this.cdr.markForCheck();
+    }
     rebuildForm() {
         this.formValueChangesSub?.unsubscribe();
         this.form = this.fb.group({});
@@ -3768,14 +4314,17 @@ class PTFormBuilderComponent {
     }
     buildFormGroup(group) {
         (group?.fields ?? []).forEach((field) => {
-            const validators = this.buildValidators(field);
-            const anyField = field;
             this.form.addControl(field.name, this.fb.control({
                 value: this.resolveInitialValue(field),
-                disabled: Boolean(anyField.disabled),
-            }, validators));
+                disabled: Boolean(field.disabled),
+            }, {
+                validators: this.buildValidators(field),
+                updateOn: 'change',
+            }));
+        });
+        (group?.groups ?? []).forEach((subGroup) => {
+            this.buildFormGroup(subGroup);
         });
-        (group?.groups ?? []).forEach((subGroup) => this.buildFormGroup(subGroup));
     }
     resolveInitialValue(field) {
         if (field.value !== undefined && field.value !== null) {
@@ -3791,31 +4340,29 @@ class PTFormBuilderComponent {
     }
     buildValidators(field) {
         const validators = [];
-        const anyField = field;
         if (field.required) {
             validators.push(Validators.required);
         }
-        if (anyField.minLength != null) {
-            validators.push(Validators.minLength(Number(anyField.minLength)));
+        if (field.minLength !== undefined && field.minLength !== null) {
+            validators.push(Validators.minLength(Number(field.minLength)));
         }
-        if (anyField.maxLength != null) {
-            validators.push(Validators.maxLength(Number(anyField.maxLength)));
+        if (field.maxLength !== undefined && field.maxLength !== null) {
+            validators.push(Validators.maxLength(Number(field.maxLength)));
         }
-        if (anyField.inputValidation) {
-            validators.push(Validators.pattern(new RegExp(anyField.inputValidation)));
+        if (field.inputValidation) {
+            validators.push(Validators.pattern(new RegExp(field.inputValidation)));
         }
-        else if (anyField.pattern) {
-            validators.push(Validators.pattern(anyField.pattern));
+        else if (field.pattern) {
+            validators.push(Validators.pattern(field.pattern));
         }
-        switch (field.type) {
-            case FormInputTypeEnum.EMAIL:
-                validators.push(Validators.email);
-                break;
-            case FormInputTypeEnum.OTP:
-                validators.push(Validators.pattern(this.buildOtpPattern(field)));
-                break;
-            default:
-                break;
+        if (field.type === FormInputTypeEnum.EMAIL) {
+            validators.push(Validators.email);
+        }
+        if (field.type === FormInputTypeEnum.OTP) {
+            validators.push(Validators.pattern(this.buildOtpPattern(field)));
+        }
+        if (Array.isArray(field.validators) && field.validators.length > 0) {
+            validators.push(...field.validators);
         }
         return validators;
     }
@@ -3827,55 +4374,32 @@ class PTFormBuilderComponent {
         }
         return new RegExp(`^[A-Za-z0-9]{${length}}$`);
     }
-    isInvalid(field) {
-        const control = this.form.get(field.name);
-        return Boolean(control && control.invalid && (control.touched || control.dirty));
-    }
-    getErrorMessage(field) {
-        const control = this.form.get(field.name);
-        if (!control) {
-            return '';
-        }
-        const lang = this.language;
-        if (control.hasError('required')) {
-            return (field.errorText ||
-                `${field.label} ${this.errorMessages[lang].required}`);
-        }
-        if (control.hasError('email')) {
-            return (field.errorText ||
-                `${field.label} ${this.errorMessages[lang].email}`);
-        }
-        if (control.hasError('pattern')) {
-            return (field.errorText ||
-                `${field.label} ${this.errorMessages[lang].pattern}`);
-        }
-        if (control.hasError('minlength')) {
-            const requiredLength = control.getError('minlength')?.requiredLength;
-            return `${field.label} ${this.errorMessages[lang].minlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
-        }
-        if (control.hasError('maxlength')) {
-            const requiredLength = control.getError('maxlength')?.requiredLength;
-            return `${field.label} ${this.errorMessages[lang].maxlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
+    resolveFirstErrorKey(control) {
+        const errors = control.errors;
+        if (!errors) {
+            return undefined;
         }
-        return '';
-    }
-    onSubmit() {
-        this.form.markAllAsTouched();
-        if (this.form.valid) {
-            this.formSubmit.emit(this.form.getRawValue());
+        const priority = [
+            'required',
+            'email',
+            'minlength',
+            'maxlength',
+            'min',
+            'max',
+            'pattern',
+        ];
+        const priorityError = priority.find((key) => errors[key] !== undefined);
+        if (priorityError) {
+            return priorityError;
         }
-    }
-    onClear() {
-        this.form.reset();
-        this.formChange.emit(this.form.getRawValue());
-        this.cdr.markForCheck();
+        return Object.keys(errors)[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }], 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: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<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      @if (!isFieldHidden(field)) {\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          [inputWidth]=\"inputWidth\"\n        ></pt-dynamic-form-field>\n      }\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          @if (!isFieldHidden(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        }\n      </div>\n    }\n\n    @if (buttons.length) {\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            [disabled]=\"button.disabled || false\"\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    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::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:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.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: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{\n    width: formWidth,\n    'max-width': formWidth,\n  }\"\n>\n  @if (title) {\n    <div class=\"form-title\" [ngStyle]=\"titleStyle\">\n      {{ title }}\n    </div>\n  }\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      @if (!isFieldHidden(field)) {\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          [inputWidth]=\"inputWidth\"\n        ></pt-dynamic-form-field>\n      }\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{\n          width: group.width || '100%',\n        }\"\n      >\n        @for (field of group.fields; track field.name) {\n          @if (!isFieldHidden(field)) {\n            <pt-dynamic-form-field\n              class=\"flex-item\"\n              [field]=\"field\"\n              [form]=\"form\"\n              [inputWidth]=\"inputWidth\"\n            ></pt-dynamic-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (buttons.length > 0) {\n      <div class=\"button-group\">\n        @for (button of buttons; track button.text) {\n          <button\n            pButton\n            [type]=\"button.isSubmit ? 'submit' : 'button'\"\n            [label]=\"button.text\"\n            [icon]=\"button.icon || ''\"\n            [class]=\"button.color || ''\"\n            [disabled]=\"button.disabled || false\"\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                ? null\n                : button.isClear\n                  ? onClear()\n                  : button.action\n                    ? button.action()\n                    : null\n            \"\n          ></button>\n        }\n      </div>\n    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::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:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.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: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<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      @if (!isFieldHidden(field)) {\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          [inputWidth]=\"inputWidth\"\n        ></pt-dynamic-form-field>\n      }\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          @if (!isFieldHidden(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        }\n      </div>\n    }\n\n    @if (buttons.length) {\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            [disabled]=\"button.disabled || false\"\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    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::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:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.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: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{\n    width: formWidth,\n    'max-width': formWidth,\n  }\"\n>\n  @if (title) {\n    <div class=\"form-title\" [ngStyle]=\"titleStyle\">\n      {{ title }}\n    </div>\n  }\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      @if (!isFieldHidden(field)) {\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          [inputWidth]=\"inputWidth\"\n        ></pt-dynamic-form-field>\n      }\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{\n          width: group.width || '100%',\n        }\"\n      >\n        @for (field of group.fields; track field.name) {\n          @if (!isFieldHidden(field)) {\n            <pt-dynamic-form-field\n              class=\"flex-item\"\n              [field]=\"field\"\n              [form]=\"form\"\n              [inputWidth]=\"inputWidth\"\n            ></pt-dynamic-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (buttons.length > 0) {\n      <div class=\"button-group\">\n        @for (button of buttons; track button.text) {\n          <button\n            pButton\n            [type]=\"button.isSubmit ? 'submit' : 'button'\"\n            [label]=\"button.text\"\n            [icon]=\"button.icon || ''\"\n            [class]=\"button.color || ''\"\n            [disabled]=\"button.disabled || false\"\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                ? null\n                : button.isClear\n                  ? onClear()\n                  : button.action\n                    ? button.action()\n                    : null\n            \"\n          ></button>\n        }\n      </div>\n    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::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:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.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 }, { type: i0.ChangeDetectorRef }], propDecorators: { mainGroup: [{
                 type: Input
             }], buttons: [{
@@ -9464,6 +9988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// projects/ng-prime-tools/src/lib/models/form-multi-select.model.ts
+
 // projects/ng-prime-tools/src/lib/models/pt-accordion-config.model.ts
 
 // nav-bar-menu-config.model.ts