ng-prime-tools 1.0.91 → 1.0.93

package/fesm2022/ng-prime-tools.mjs

@@ -205,6 +205,7 @@ class PTAdvancedPrimeTableComponent {
         this.onSortColumn = new EventEmitter();
         this.onFilterColumn = new EventEmitter();
         this.rowReorderChange = new EventEmitter();
+        this.filteredData = new EventEmitter();
         this.TableTypeEnum = TableTypeEnum;
         this.AlignEnum = AlignEnum;
         this.SeverityEnum = SeverityEnum;
@@ -642,8 +643,9 @@ class PTAdvancedPrimeTableComponent {
         }
         else if (this.dt) {
             const current = (this.dt.filteredValue ?? this.dt.value ?? []);
-            this.totalRecords = current?.length ?? 0;
+            this.totalRecords = current.length;
             this.dt.first = 0;
+            this.filteredData.emit([...current]);
         }
     }
     changePage(event) {
@@ -778,9 +780,11 @@ class PTAdvancedPrimeTableComponent {
             return;
         }
         if (!value) {
-            this.dt.value = [...(this.data ?? [])];
-            this.totalRecords = (this.dt.value ?? []).length;
+            const allData = [...(this.data ?? [])];
+            this.dt.value = allData;
+            this.totalRecords = allData.length;
             this.dt.first = 0;
+            this.filteredData.emit(allData);
             return;
         }
         const filteredData = (this.data ?? []).filter((item) => (this.globalFilterFields ?? []).some((field) => {
@@ -814,6 +818,7 @@ class PTAdvancedPrimeTableComponent {
         this.dt.value = filteredData;
         this.totalRecords = filteredData.length;
         this.dt.first = 0;
+        this.filteredData.emit([...filteredData]);
     }
     filterComposedColumn(composedData, value) {
         if (!composedData)
@@ -910,9 +915,11 @@ class PTAdvancedPrimeTableComponent {
             return;
         }
         if (this.dt) {
-            this.dt.value = [...(this.data ?? [])];
-            this.totalRecords = (this.dt.value ?? []).length;
+            const allData = [...(this.data ?? [])];
+            this.dt.value = allData;
+            this.totalRecords = allData.length;
             this.dt.first = 0;
+            this.filteredData.emit(allData);
         }
     }
     initializePagination() {
@@ -1181,7 +1188,7 @@ class PTAdvancedPrimeTableComponent {
         return styles;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col style=\"width: 3rem\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"'3rem'\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <span\n                pReorderableRowHandle\n                style=\"cursor: move; display: inline-flex; align-items: center\"\n                title=\"D\u00E9placer la ligne\"\n              >\n                <i class=\"pi pi-bars\"></i>\n              </span>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    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", 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col style=\"width: 3rem\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"'3rem'\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <span\n                pReorderableRowHandle\n                style=\"cursor: move; display: inline-flex; align-items: center\"\n                title=\"D\u00E9placer la ligne\"\n              >\n                <i class=\"pi pi-bars\"></i>\n              </span>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
@@ -1252,6 +1259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], rowReorderChange: [{
                 type: Output
+            }], filteredData: [{
+                type: Output
             }], dt: [{
                 type: ViewChild,
                 args: ['dt', { static: false }]
@@ -3385,18 +3394,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }] } });
 
+// projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.ts
 class PTFormBuilderComponent {
-    constructor(fb) {
+    constructor(fb, cdr) {
         this.fb = fb;
+        this.cdr = cdr;
         this.mainGroup = { fields: [], groups: [] };
         this.buttons = [];
-        /**
-         * Largeur des inputs/champs.
-         */
         this.inputWidth = '100%';
-        /**
-         * Largeur globale du composant pt-form-builder.
-         */
         this.formWidth = '100%';
         this.language = 'en';
         this.formSubmit = new EventEmitter();
@@ -3432,6 +3437,13 @@ class PTFormBuilderComponent {
     ngOnDestroy() {
         this.formValueChangesSub?.unsubscribe();
     }
+    isFieldHidden(field) {
+        const hidden = field.hidden;
+        if (typeof hidden === 'function') {
+            return Boolean(hidden(this.form.getRawValue()));
+        }
+        return Boolean(hidden);
+    }
     rebuildForm() {
         this.formValueChangesSub?.unsubscribe();
         this.form = this.fb.group({});
@@ -3439,6 +3451,7 @@ class PTFormBuilderComponent {
         this.formReady.emit(this.form);
         this.formValueChangesSub = this.form.valueChanges.subscribe((value) => {
             this.formChange.emit(value);
+            this.cdr.markForCheck();
         });
     }
     buildFormGroup(group) {
@@ -3447,7 +3460,7 @@ class PTFormBuilderComponent {
             const anyField = field;
             this.form.addControl(field.name, this.fb.control({
                 value: this.resolveInitialValue(field),
-                disabled: !!anyField.disabled,
+                disabled: Boolean(anyField.disabled),
             }, validators));
         });
         (group?.groups ?? []).forEach((subGroup) => this.buildFormGroup(subGroup));
@@ -3504,7 +3517,7 @@ class PTFormBuilderComponent {
     }
     isInvalid(field) {
         const control = this.form.get(field.name);
-        return !!control && control.invalid && (control.touched || control.dirty);
+        return Boolean(control && control.invalid && (control.touched || control.dirty));
     }
     getErrorMessage(field) {
         const control = this.form.get(field.name);
@@ -3525,12 +3538,12 @@ class PTFormBuilderComponent {
                 `${field.label} ${this.errorMessages[lang].pattern}`);
         }
         if (control.hasError('minlength')) {
-            const requiredLen = control.getError('minlength')?.requiredLength;
-            return `${field.label} ${this.errorMessages[lang].minlength} ${requiredLen} ${lang === 'fr' ? 'caractères' : 'characters'}`;
+            const requiredLength = control.getError('minlength')?.requiredLength;
+            return `${field.label} ${this.errorMessages[lang].minlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
         }
         if (control.hasError('maxlength')) {
-            const requiredLen = control.getError('maxlength')?.requiredLength;
-            return `${field.label} ${this.errorMessages[lang].maxlength} ${requiredLen} ${lang === 'fr' ? 'caractères' : 'characters'}`;
+            const requiredLength = control.getError('maxlength')?.requiredLength;
+            return `${field.label} ${this.errorMessages[lang].maxlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
         }
         return '';
     }
@@ -3543,14 +3556,15 @@ class PTFormBuilderComponent {
     onClear() {
         this.form.reset();
         this.formChange.emit(this.form.getRawValue());
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    @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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    @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"] }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
+            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"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { mainGroup: [{
                 type: Input
             }], buttons: [{
                 type: Input
@@ -7552,21 +7566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// src/lib/components/pt-metric-panel/pt-metric-panel.component.ts
 class PTMetricPanelComponent {
     constructor(router) {
         this.router = router;
         this.cardConfig = this.getDefaultCardConfig();
     }
-    ngOnInit() { }
     getDefaultCardConfig() {
         return {
             backgroundColor: '#fff',
-            borderColor: '#ddd',
+            borderColor: '#e7eaf0',
             borderWidth: '1px',
-            padding: '20px',
+            padding: '16px',
             margin: '10px 0',
-            borderRadius: '8px',
-            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+            borderRadius: '18px',
+            boxShadow: '0 8px 20px rgba(15, 23, 42, 0.06)',
         };
     }
     getTitleText() {
@@ -7577,35 +7591,38 @@ class PTMetricPanelComponent {
     getTitleStyles() {
         if (typeof this.panelData.title === 'object') {
             return {
-                color: this.panelData.title.color || '#333',
-                fontSize: this.panelData.title.fontSize || '1.5rem',
+                color: this.panelData.title.color || '#2c1476',
+                fontSize: this.panelData.title.fontSize || '1.15rem',
                 textAlign: this.panelData.title.position || 'left',
             };
         }
         return {};
     }
     getIconClass(icon) {
-        return icon ? icon : '';
+        return icon || '';
     }
     getIconStyles(icon) {
-        if (typeof icon === 'object') {
+        if (typeof icon === 'object' && icon !== null) {
+            const iconStyle = icon;
             return {
-                color: icon.color || '#333',
-                fontSize: icon.fontSize || '1.2rem',
-                backgroundColor: icon.backgroundColor || 'transparent',
-                borderRadius: icon.shape === 'circular' ? '50%' : '8px',
-                padding: '6px',
-                display: 'inline-block',
+                color: iconStyle.color || '#6734c9',
+                fontSize: iconStyle.fontSize || '1.1rem',
+                backgroundColor: iconStyle.backgroundColor || '#f0e7ff',
+                borderRadius: iconStyle.shape === 'circular' ? '50%' : '12px',
+                padding: '10px',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
             };
         }
         return {};
     }
     getValueStyles(value) {
-        if (typeof value === 'object' && 'text' in value) {
+        if (this.isTitleStyle(value)) {
             return {
-                color: value.color || '#2d3748',
-                fontSize: value.fontSize || '1rem',
-                fontWeight: value.fontWeight || 'bold',
+                color: value.color || '#1f2937',
+                fontSize: value.fontSize || '0.95rem',
+                fontWeight: value.fontWeight || '700',
             };
         }
         return {};
@@ -7614,11 +7631,11 @@ class PTMetricPanelComponent {
         return typeof this.panelData.title === 'object';
     }
     getTitleIcon() {
-        if (this.isTitleObject()) {
-            const icon = this.panelData.title.icon;
-            return typeof icon === 'string' ? icon : icon?.code;
+        if (!this.isTitleObject()) {
+            return undefined;
         }
-        return undefined;
+        const icon = this.panelData.title.icon;
+        return typeof icon === 'string' ? icon : icon?.code;
     }
     isTitleStyle(value) {
         return typeof value === 'object' && value !== null && 'text' in value;
@@ -7629,11 +7646,11 @@ class PTMetricPanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig" }, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n  <!-- Panel Title -->\n  <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n    @if (getTitleIcon()) {\n      <i\n        [ngClass]=\"getIconClass(getTitleIcon())\"\n        [ngStyle]=\"getIconStyles(getTitleIcon())\"\n      ></i>\n    }\n    <span>{{ getTitleText() }}</span>\n  </div>\n\n  <hr />\n\n  <!-- Metric Indicators -->\n  <div class=\"metric-list\">\n    @for (item of panelData.indicators; track item) {\n      <div\n        class=\"metric-item\"\n        [ngStyle]=\"{ cursor: item?.url ? 'pointer' : 'default' }\"\n        (click)=\"handleClick(item?.url)\"\n        [attr.title]=\"item?.url ? 'Go to ' + item.url : ''\"\n        >\n        @if (item.icon) {\n          <i\n            [ngClass]=\"getIconClass(item.icon.code)\"\n            [ngStyle]=\"getIconStyles(item.icon)\"\n          ></i>\n        }\n        <span class=\"metric-title\">\n          {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n        </span>\n        <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n          {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n        </span>\n      </div>\n    }\n  </div>\n</pt-card>\n", styles: [".panel-header{display:flex;align-items:center;font-size:1.3rem;font-weight:700;color:#333;gap:10px}hr{border:0;height:1px;background:#ddd;margin:10px 0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:5px;background:#fff;transition:.3s ease-in-out}.metric-item:hover{background:#f1f1f1}.metric-title{flex-grow:1;font-size:1rem;color:#333}.metric-value{font-size:1rem;font-weight:700;color:#2d3748}.metric-item[ngStyle]{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig" }, ngImport: i0, template: "<!-- src/lib/components/pt-metric-panel/pt-metric-panel.component.html -->\n\n<pt-card [config]=\"cardConfig\">\n  <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n    @if (getTitleIcon()) {\n      <i class=\"panel-title-icon\" [ngClass]=\"getIconClass(getTitleIcon())\"></i>\n    }\n\n    <span class=\"panel-title-text\">{{ getTitleText() }}</span>\n  </div>\n\n  <div class=\"metric-list\">\n    @for (item of panelData.indicators; track $index) {\n      <div\n        class=\"metric-item\"\n        [class.metric-item-clickable]=\"!!item.url\"\n        [pTooltip]=\"item.tooltip || ''\"\n        tooltipPosition=\"top\"\n        [tooltipDisabled]=\"!item.tooltip\"\n        (click)=\"handleClick(item.url)\"\n      >\n        <div class=\"metric-left\">\n          @if (item.icon) {\n            <span class=\"metric-icon-wrapper\">\n              <i\n                [ngClass]=\"getIconClass(item.icon.code)\"\n                [ngStyle]=\"getIconStyles(item.icon)\"\n              ></i>\n            </span>\n          }\n\n          <span class=\"metric-title\">\n            {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n          </span>\n        </div>\n\n        <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n          {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n        </span>\n      </div>\n    }\n  </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{color:inherit}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}@media(max-width:576px){.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-metric-panel', standalone: false, template: "<pt-card [config]=\"cardConfig\">\n  <!-- Panel Title -->\n  <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n    @if (getTitleIcon()) {\n      <i\n        [ngClass]=\"getIconClass(getTitleIcon())\"\n        [ngStyle]=\"getIconStyles(getTitleIcon())\"\n      ></i>\n    }\n    <span>{{ getTitleText() }}</span>\n  </div>\n\n  <hr />\n\n  <!-- Metric Indicators -->\n  <div class=\"metric-list\">\n    @for (item of panelData.indicators; track item) {\n      <div\n        class=\"metric-item\"\n        [ngStyle]=\"{ cursor: item?.url ? 'pointer' : 'default' }\"\n        (click)=\"handleClick(item?.url)\"\n        [attr.title]=\"item?.url ? 'Go to ' + item.url : ''\"\n        >\n        @if (item.icon) {\n          <i\n            [ngClass]=\"getIconClass(item.icon.code)\"\n            [ngStyle]=\"getIconStyles(item.icon)\"\n          ></i>\n        }\n        <span class=\"metric-title\">\n          {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n        </span>\n        <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n          {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n        </span>\n      </div>\n    }\n  </div>\n</pt-card>\n", styles: [".panel-header{display:flex;align-items:center;font-size:1.3rem;font-weight:700;color:#333;gap:10px}hr{border:0;height:1px;background:#ddd;margin:10px 0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:5px;background:#fff;transition:.3s ease-in-out}.metric-item:hover{background:#f1f1f1}.metric-title{flex-grow:1;font-size:1rem;color:#333}.metric-value{font-size:1rem;font-weight:700;color:#2d3748}.metric-item[ngStyle]{cursor:pointer}\n"] }]
+            args: [{ selector: 'pt-metric-panel', standalone: false, template: "<!-- src/lib/components/pt-metric-panel/pt-metric-panel.component.html -->\n\n<pt-card [config]=\"cardConfig\">\n  <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n    @if (getTitleIcon()) {\n      <i class=\"panel-title-icon\" [ngClass]=\"getIconClass(getTitleIcon())\"></i>\n    }\n\n    <span class=\"panel-title-text\">{{ getTitleText() }}</span>\n  </div>\n\n  <div class=\"metric-list\">\n    @for (item of panelData.indicators; track $index) {\n      <div\n        class=\"metric-item\"\n        [class.metric-item-clickable]=\"!!item.url\"\n        [pTooltip]=\"item.tooltip || ''\"\n        tooltipPosition=\"top\"\n        [tooltipDisabled]=\"!item.tooltip\"\n        (click)=\"handleClick(item.url)\"\n      >\n        <div class=\"metric-left\">\n          @if (item.icon) {\n            <span class=\"metric-icon-wrapper\">\n              <i\n                [ngClass]=\"getIconClass(item.icon.code)\"\n                [ngStyle]=\"getIconStyles(item.icon)\"\n              ></i>\n            </span>\n          }\n\n          <span class=\"metric-title\">\n            {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n          </span>\n        </div>\n\n        <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n          {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n        </span>\n      </div>\n    }\n  </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{color:inherit}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}@media(max-width:576px){.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { panelData: [{
                 type: Input
             }], cardConfig: [{
@@ -7642,14 +7659,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 class PTMetricPanelModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, declarations: [PTMetricPanelComponent], imports: [CommonModule, PTCardModule], exports: [PTMetricPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, imports: [CommonModule, PTCardModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, declarations: [PTMetricPanelComponent], imports: [CommonModule, PTCardModule, TooltipModule], exports: [PTMetricPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, imports: [CommonModule, PTCardModule, TooltipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PTMetricPanelComponent],
-                    imports: [CommonModule, PTCardModule],
+                    imports: [CommonModule, PTCardModule, TooltipModule],
                     exports: [PTMetricPanelComponent],
                 }]
         }] });