ng-prime-tools 1.0.22 → 1.0.24

package/fesm2022/ng-prime-tools.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Injectable, HostListener } from '@angular/core';
+import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Injectable, HostListener, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -41,13 +41,13 @@ import * as i3$5 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { Chart, registerables } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import * as i2$2 from '@angular/router';
+import * as i1$2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { BehaviorSubject } from 'rxjs';
 import * as i3$6 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i2$3 from 'primeng/toast';
+import * as i2$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i3$7 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -346,7 +346,6 @@ class PTAdvancedPrimeTableComponent {
             case TableTypeEnum.STRING:
                 return 'text';
             case TableTypeEnum.AMOUNT:
-                return 'numeric';
             case TableTypeEnum.NUMBER:
                 return 'numeric';
             case TableTypeEnum.DATE:
@@ -487,12 +486,31 @@ class PTAdvancedPrimeTableComponent {
         }
         return {};
     }
+    formatNumber(value, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
+        if (value === null || value === undefined || isNaN(value))
+            return '';
+        // Convert the number to a string with full precision if decimalPlaces is undefined
+        let formattedNumber = decimalPlaces !== undefined
+            ? value.toFixed(decimalPlaces)
+            : value.toString();
+        // Replace decimal separator (default is "dot")
+        if (decimalSeparator === 'comma') {
+            formattedNumber = formattedNumber.replace('.', ',');
+        }
+        // Apply thousand separator only if the number is >= 1000
+        if (thousandSeparator && Math.abs(value) >= 1000) {
+            const parts = formattedNumber.split(decimalSeparator === 'comma' ? ',' : '.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator === 'comma' ? ',' : ' ');
+            formattedNumber = parts.join(decimalSeparator === 'comma' ? ',' : '.');
+        }
+        return formattedNumber;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\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          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\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          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\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        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\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-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <ng-container\n                    *ngIf=\"col.type === TableTypeEnum.COMPOSED; else normalText\"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code][composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-container\n                    *ngIf=\"col.type === TableTypeEnum.AMOUNT; else normalText\"\n                  >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n\n                  <ng-template #normalText>\n                    <ng-container *ngIf=\"col.type === TableTypeEnum.STRING\">\n                      {{ data[col.code] }}\n                    </ng-container>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\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;justify-content:center;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 p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\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          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\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          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\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        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            placeholder=\"Enter number\"\n                          />\n                        </ng-template>\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\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-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code][composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"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                  </ng-container>\n\n                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- STRING-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.STRING\">\n                    {{ data[col.code] }}\n                  </ng-container>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\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;justify-content:center;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 p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "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", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-advanced-prime-table', 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\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          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\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          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\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        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\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-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <ng-container\n                    *ngIf=\"col.type === TableTypeEnum.COMPOSED; else normalText\"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code][composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-container\n                    *ngIf=\"col.type === TableTypeEnum.AMOUNT; else normalText\"\n                  >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n\n                  <ng-template #normalText>\n                    <ng-container *ngIf=\"col.type === TableTypeEnum.STRING\">\n                      {{ data[col.code] }}\n                    </ng-container>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\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;justify-content:center;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 p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\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          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\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          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\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        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            placeholder=\"Enter number\"\n                          />\n                        </ng-template>\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\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-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code][composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"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                  </ng-container>\n\n                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- STRING-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.STRING\">\n                    {{ data[col.code] }}\n                  </ng-container>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\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;justify-content:center;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 p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -685,6 +703,17 @@ class MultiSearchCriteriaComponent {
     getCurrencySymbol(input) {
         return input.currency || 'EUR';
     }
+    getMinFractionDigits(input) {
+        return input.minFractionDigits ?? 0;
+    }
+    getMaxFractionDigits(input) {
+        return input.maxFractionDigits ?? undefined;
+    }
+    getStepValue(input) {
+        return input.maxFractionDigits
+            ? parseFloat(`0.${'1'.padEnd(input.maxFractionDigits, '0')}`)
+            : 0.0000000001;
+    }
     search() {
         if (this.mode === 'dynamic') {
             const criteriaValues = {};
@@ -717,8 +746,10 @@ class MultiSearchCriteriaComponent {
                         return ((!parsedStartDate || itemDate >= parsedStartDate) &&
                             (!parsedEndDate || itemDate <= parsedEndDate));
                     }
-                    else if (criterion.type === SearchCriteriaTypeEnum.AMOUNT) {
-                        return !criterion.value || item[criterion.code] === criterion.value;
+                    else if (criterion.type === SearchCriteriaTypeEnum.AMOUNT ||
+                        criterion.type === SearchCriteriaTypeEnum.NUMBER) {
+                        return (!criterion.value ||
+                            Number(item[criterion.code]) === Number(criterion.value));
                     }
                     else if (criterion.type === SearchCriteriaTypeEnum.MULTISELECT) {
                         return (!criterion.value ||
@@ -764,12 +795,15 @@ class MultiSearchCriteriaComponent {
         }
         return null;
     }
+    getDecimalSeparator(input) {
+        return input.decimalSeparator === 'comma' ? 'fr-FR' : 'en-US';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MultiSearchCriteriaComponent, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MultiSearchCriteriaComponent, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <!-- Date Range -->\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n\n        <!-- Date -->\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n\n        <!-- String Input -->\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <!-- AMOUNT (Ensures Decimal Handling) -->\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"getMinFractionDigits(input)\"\n          [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n          [step]=\"getStepValue(input)\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          [locale]=\"getDecimalSeparator(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <!-- NUMBER (Ensures Decimal Handling) -->\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"getMinFractionDigits(input)\"\n          [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n          [step]=\"getStepValue(input)\"\n          [useGrouping]=\"false\"\n          [locale]=\"getDecimalSeparator(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <!-- Multi-Select -->\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'multi-search-criteria', template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"] }]
+            args: [{ selector: 'multi-search-criteria', template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <!-- Date Range -->\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n\n        <!-- Date -->\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n\n        <!-- String Input -->\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <!-- AMOUNT (Ensures Decimal Handling) -->\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"getMinFractionDigits(input)\"\n          [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n          [step]=\"getStepValue(input)\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          [locale]=\"getDecimalSeparator(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <!-- NUMBER (Ensures Decimal Handling) -->\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"getMinFractionDigits(input)\"\n          [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n          [step]=\"getStepValue(input)\"\n          [useGrouping]=\"false\"\n          [locale]=\"getDecimalSeparator(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <!-- Multi-Select -->\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], criteria: [{
@@ -2642,7 +2676,7 @@ class PTNavbarMenuComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n    <!-- Toggle Button -->\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n  <div class=\"navbar-right\">\n    <pt-menu-fancy\n      *ngFor=\"let menuConfig of navBarMenuConfig.menus\"\n      [config]=\"menuConfig\"\n    ></pt-menu-fancy>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000;cursor:pointer}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n    <!-- Toggle Button -->\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n  <div class=\"navbar-right\">\n    <pt-menu-fancy\n      *ngFor=\"let menuConfig of navBarMenuConfig.menus\"\n      [config]=\"menuConfig\"\n    ></pt-menu-fancy>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000;cursor:pointer}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
             type: Component,
@@ -2876,7 +2910,7 @@ class PTSideBarMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
             type: Component,
@@ -3013,7 +3047,7 @@ class PTBreadCrumbService {
         }
         return breadcrumbs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, deps: [{ token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, decorators: [{
@@ -3021,7 +3055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2$2.Router }] });
+        }], ctorParameters: () => [{ type: i1$2.Router }] });
 
 class PTBreadCrumbComponent {
     constructor(breadcrumbService, renderer, el) {
@@ -3105,7 +3139,7 @@ class PTPageSkeletonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTPageSkeletonComponent, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    <pt-side-bar-menu\n      *ngIf=\"isSidebarVisible\"\n      [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n      class=\"sidebar\"\n    ></pt-side-bar-menu>\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        <pt-bread-crumb\n          *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <pt-footer\n    *ngIf=\"pageSkeletonConfig.footerConfig\"\n    [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n    class=\"pt-footer\"\n  ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTPageSkeletonComponent, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    <pt-side-bar-menu\n      *ngIf=\"isSidebarVisible\"\n      [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n      class=\"sidebar\"\n    ></pt-side-bar-menu>\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        <pt-bread-crumb\n          *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <pt-footer\n    *ngIf=\"pageSkeletonConfig.footerConfig\"\n    [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n    class=\"pt-footer\"\n  ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
             type: Component,
@@ -3538,7 +3572,7 @@ class PTDialogComponent {
         return buttonConfig?.styleClass || 'p-button-sm'; // Default to small button style
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [{ token: i1$1.ConfirmationService }, { token: i1$1.MessageService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { dialogModel: "dialogModel" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div>\n  <p-toast></p-toast>\n  <p-confirmDialog>\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\"\n      >\n        <i [class]=\"dialogModel.header?.icon || 'pi pi-exclamation-circle'\"></i>\n        <p>{{ message.message }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i3$7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { dialogModel: "dialogModel" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div>\n  <p-toast></p-toast>\n  <p-confirmDialog>\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\"\n      >\n        <i [class]=\"dialogModel.header?.icon || 'pi pi-exclamation-circle'\"></i>\n        <p>{{ message.message }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i3$7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
@@ -3812,6 +3846,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+class PTMetricPanelComponent {
+    constructor(router) {
+        this.router = router;
+        this.cardConfig = this.getDefaultCardConfig();
+    }
+    ngOnInit() { }
+    getDefaultCardConfig() {
+        return {
+            backgroundColor: '#fff',
+            borderColor: '#ddd',
+            borderWidth: '1px',
+            padding: '20px',
+            margin: '10px 0',
+            borderRadius: '8px',
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        };
+    }
+    getTitleText() {
+        return typeof this.panelData.title === 'object'
+            ? this.panelData.title.text
+            : this.panelData.title || '';
+    }
+    getTitleStyles() {
+        if (typeof this.panelData.title === 'object') {
+            return {
+                color: this.panelData.title.color || '#333',
+                fontSize: this.panelData.title.fontSize || '1.5rem',
+                textAlign: this.panelData.title.position || 'left',
+            };
+        }
+        return {};
+    }
+    getIconClass(icon) {
+        return icon ? icon : '';
+    }
+    getIconStyles(icon) {
+        if (typeof icon === 'object') {
+            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',
+            };
+        }
+        return {};
+    }
+    getValueStyles(value) {
+        if (typeof value === 'object' && 'text' in value) {
+            return {
+                color: value.color || '#2d3748',
+                fontSize: value.fontSize || '1rem',
+                fontWeight: value.fontWeight || 'bold',
+            };
+        }
+        return {};
+    }
+    isTitleObject() {
+        return typeof this.panelData.title === 'object';
+    }
+    getTitleIcon() {
+        if (this.isTitleObject()) {
+            const icon = this.panelData.title.icon;
+            return typeof icon === 'string' ? icon : icon?.code;
+        }
+        return undefined;
+    }
+    isTitleStyle(value) {
+        return typeof value === 'object' && value !== null && 'text' in value;
+    }
+    handleClick(url) {
+        if (url) {
+            this.router.navigate([url]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMetricPanelComponent, 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    <i\n      *ngIf=\"getTitleIcon()\"\n      [ngClass]=\"getIconClass(getTitleIcon())\"\n      [ngStyle]=\"getIconStyles(getTitleIcon())\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n  </div>\n\n  <hr />\n\n  <!-- Metric Indicators -->\n  <div class=\"metric-list\">\n    <div\n      *ngFor=\"let item of panelData.indicators\"\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      <i\n        *ngIf=\"item.icon\"\n        [ngClass]=\"getIconClass(item.icon.code)\"\n        [ngStyle]=\"getIconStyles(item.icon)\"\n      ></i>\n      <span class=\"metric-title\">\n        {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n      </span>\n\n      <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n        {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n      </span>\n    </div>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-metric-panel', template: "<pt-card [config]=\"cardConfig\">\n  <!-- Panel Title -->\n  <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getTitleIcon()\"\n      [ngClass]=\"getIconClass(getTitleIcon())\"\n      [ngStyle]=\"getIconStyles(getTitleIcon())\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n  </div>\n\n  <hr />\n\n  <!-- Metric Indicators -->\n  <div class=\"metric-list\">\n    <div\n      *ngFor=\"let item of panelData.indicators\"\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      <i\n        *ngIf=\"item.icon\"\n        [ngClass]=\"getIconClass(item.icon.code)\"\n        [ngStyle]=\"getIconStyles(item.icon)\"\n      ></i>\n      <span class=\"metric-title\">\n        {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n      </span>\n\n      <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n        {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n      </span>\n    </div>\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"] }]
+        }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { panelData: [{
+                type: Input
+            }], cardConfig: [{
+                type: Input
+            }] } });
+
+class PTMetricPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelModule, declarations: [PTMetricPanelComponent], imports: [CommonModule, PTCardModule], exports: [PTMetricPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelModule, imports: [CommonModule, PTCardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMetricPanelComponent],
+                    imports: [CommonModule, PTCardModule],
+                    exports: [PTMetricPanelComponent],
+                }]
+        }] });
+
 class PTLineChartComponent {
     constructor() {
         this.config = {
@@ -3928,9 +4064,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 // Advanced table
 
+class PTGroupComponent {
+    constructor() {
+        this.gap = '16px';
+        this.justify = 'flex-start';
+        this.display = 'flex';
+        this.flexWrap = 'wrap';
+    }
+    get gapSize() {
+        return this.gap;
+    }
+    get justifyContent() {
+        return this.justify;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTGroupComponent, selector: "pt-group", inputs: { gap: "gap", justify: "justify" }, host: { properties: { "style.display": "this.display", "style.flexWrap": "this.flexWrap", "style.gap": "this.gapSize", "style.justifyContent": "this.justifyContent" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--gap, 16px);justify-content:var(--justify, flex-start)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-group', template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--gap, 16px);justify-content:var(--justify, flex-start)}\n"] }]
+        }], propDecorators: { gap: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], flexWrap: [{
+                type: HostBinding,
+                args: ['style.flexWrap']
+            }], gapSize: [{
+                type: HostBinding,
+                args: ['style.gap']
+            }], justifyContent: [{
+                type: HostBinding,
+                args: ['style.justifyContent']
+            }] } });
+
+class PTGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTGroupModule, declarations: [PTGroupComponent], imports: [CommonModule, PTCardModule], exports: [PTGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTGroupModule, imports: [CommonModule, PTCardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTGroupComponent],
+                    imports: [CommonModule, PTCardModule],
+                    exports: [PTGroupComponent],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
+export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map