ng-prime-tools 1.0.8 → 1.0.9

package/fesm2022/ng-prime-tools.mjs

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Injectable } from '@angular/core';
+import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Injectable, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i3 from 'primeng/api';
@@ -11,8 +13,6 @@ import * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i6 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i2$1 from '@angular/forms';
-import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/tag';
@@ -21,6 +21,7 @@ import * as i10 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
 import * as i11 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i8$1 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i9$1 from 'primeng/panel';
@@ -37,6 +38,8 @@ import * as i3$5 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i3$6 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
+import { Chart, registerables } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 class CustomCurrencyPipe {
     transform(value, currency, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
@@ -136,6 +139,8 @@ class NgAdvancedPrimeTableComponent {
         this.isPaginated = false;
         this.actions = [];
         this.isSortable = false;
+        this.loading = false;
+        this.maxHeight = null;
         // Outputs: Events emitted to the parent component
         this.filter = new EventEmitter();
         this.search = new EventEmitter();
@@ -391,11 +396,11 @@ class NgAdvancedPrimeTableComponent {
         this.exportPdfEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-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" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\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    >\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>\n          <th *ngFor=\"let col of columns\">\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\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              </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        </tr>\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 [pEditableRow]=\"isEdit ? data : null\">\n          <!-- Loop through each column and render corresponding table cells -->\n          <ng-container *ngFor=\"let col of columns\">\n            <ng-container *ngIf=\"col.code !== undefined\">\n              <!-- Check if the data for the column exists -->\n              <ng-container *ngIf=\"data[col.code] !== undefined\">\n                <!-- Render an editable cell if the column is editable -->\n                <td *ngIf=\"isEditable(col.code); else normalTD\">\n                  <!-- Multi-select input for columns that are multi-selectable -->\n                  <ng-container\n                    *ngIf=\"isMultiSelect(col.code); else datePicker\"\n                  >\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                  <!-- Date picker input for columns that require date selection -->\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                  <!-- Normal text input for other columns -->\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                        <!-- Use currency pipe to format the output for AMOUNT type -->\n                        <ng-container\n                          *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\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                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\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 #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\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              <!-- Delete button if deletion is allowed -->\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              <!-- Edit, save, and cancel buttons for row editing -->\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</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}\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: "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: i3.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$1.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: NgAdvancedPrimeTableComponent, selector: "ng-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=\"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        <th *ngFor=\"let col of columns\">\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\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            </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      </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 and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td *ngIf=\"isEditable(col.code); else normalTD\">\n                <!-- Multi-select input for columns that are multi-selectable -->\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                <!-- Date picker input for columns that require date selection -->\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                <!-- Normal text input for other columns -->\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                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\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              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td>\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === '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                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\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            <!-- Delete button if deletion is allowed -->\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            <!-- Edit, save, and cancel buttons for row editing -->\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: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse}::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}\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: "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: i3.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$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-advanced-prime-table', template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\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    >\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>\n          <th *ngFor=\"let col of columns\">\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\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              </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        </tr>\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 [pEditableRow]=\"isEdit ? data : null\">\n          <!-- Loop through each column and render corresponding table cells -->\n          <ng-container *ngFor=\"let col of columns\">\n            <ng-container *ngIf=\"col.code !== undefined\">\n              <!-- Check if the data for the column exists -->\n              <ng-container *ngIf=\"data[col.code] !== undefined\">\n                <!-- Render an editable cell if the column is editable -->\n                <td *ngIf=\"isEditable(col.code); else normalTD\">\n                  <!-- Multi-select input for columns that are multi-selectable -->\n                  <ng-container\n                    *ngIf=\"isMultiSelect(col.code); else datePicker\"\n                  >\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                  <!-- Date picker input for columns that require date selection -->\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                  <!-- Normal text input for other columns -->\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                        <!-- Use currency pipe to format the output for AMOUNT type -->\n                        <ng-container\n                          *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\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                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\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 #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\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              <!-- Delete button if deletion is allowed -->\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              <!-- Edit, save, and cancel buttons for row editing -->\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</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}\n"] }]
+            args: [{ selector: 'ng-advanced-prime-table', template: "<div class=\"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        <th *ngFor=\"let col of columns\">\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\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            </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      </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 and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td *ngIf=\"isEditable(col.code); else normalTD\">\n                <!-- Multi-select input for columns that are multi-selectable -->\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                <!-- Date picker input for columns that require date selection -->\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                <!-- Normal text input for other columns -->\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                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\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              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td>\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === '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                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\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            <!-- Delete button if deletion is allowed -->\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            <!-- Edit, save, and cancel buttons for row editing -->\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: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse}::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -418,6 +423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], isSortable: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
             }], filter: [{
                 type: Output
             }], search: [{
@@ -443,7 +452,8 @@ class NgAdvancedPrimeTableModule {
             TagModule,
             CustomCurrencyPipe,
             IconFieldModule,
-            InputIconModule], exports: [NgAdvancedPrimeTableComponent] }); }
+            InputIconModule,
+            ProgressSpinnerModule], exports: [NgAdvancedPrimeTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, imports: [CommonModule,
             TableModule,
             InputTextModule,
@@ -453,7 +463,8 @@ class NgAdvancedPrimeTableModule {
             MultiSelectModule,
             TagModule,
             IconFieldModule,
-            InputIconModule] }); }
+            InputIconModule,
+            ProgressSpinnerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, decorators: [{
             type: NgModule,
@@ -471,18 +482,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         CustomCurrencyPipe,
                         IconFieldModule,
                         InputIconModule,
+                        ProgressSpinnerModule,
                     ],
                     exports: [NgAdvancedPrimeTableComponent],
                 }]
         }] });
 
-// projects/ng-prime-tools/src/lib/ng-advanced-prime-table/index.ts
-
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ng-prime-tools/multi-search-criteria" />
-
 var TableTypeEnum;
 (function (TableTypeEnum) {
     TableTypeEnum["DATE"] = "DATE";
@@ -702,13 +707,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-// projects/ng-prime-tools/src/lib/ng-advanced-prime-table/index.ts
-
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ng-prime-tools/multi-search-criteria" />
-
 class PTCheckBoxInputComponent {
     ngOnInit() {
         this.setupControl();
@@ -1702,6 +1700,450 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+class PTMetricCardComponent {
+    static { this.DEFAULT_ICON_COLOR = '#5a67d8'; }
+    static { this.DEFAULT_ICON_SIZE = '24px'; }
+    static { this.DEFAULT_TITLE_COLOR = '#5a67d8'; }
+    static { this.DEFAULT_TITLE_SIZE = '16px'; }
+    static { this.DEFAULT_VALUE_COLOR = '#2d3748'; }
+    static { this.DEFAULT_VALUE_SIZE = '32px'; }
+    static { this.DEFAULT_LABEL_COLOR = '#718096'; }
+    static { this.DEFAULT_LABEL_SIZE = '14px'; }
+    static { this.DEFAULT_ADDITIONAL_INFO_COLOR = 'gray'; }
+    static { this.DEFAULT_ADDITIONAL_INFO_SIZE = '14px'; }
+    static { this.DEFAULT_BACKGROUND_COLOR = '#fff'; }
+    isIconObject() {
+        return typeof this.cardData.icon === 'object';
+    }
+    isTitleObject() {
+        return typeof this.cardData.title === 'object';
+    }
+    isValueObject() {
+        return typeof this.cardData.value === 'object';
+    }
+    isLabelObject(label) {
+        return typeof label === 'object';
+    }
+    isAdditionalInfoObject() {
+        return typeof this.cardData.additionalInfo === 'object';
+    }
+    getIconText() {
+        return this.isIconObject()
+            ? this.cardData.icon.code
+            : this.cardData.icon;
+    }
+    getTitleText() {
+        return this.isTitleObject()
+            ? this.cardData.title.text
+            : this.cardData.title;
+    }
+    getValueText() {
+        return this.isValueObject()
+            ? this.cardData.value.text
+            : this.cardData.value;
+    }
+    getLabelText() {
+        const label = this.cardData.value?.label;
+        return this.isLabelObject(label)
+            ? label.text
+            : label;
+    }
+    getAdditionalInfoText() {
+        return this.isAdditionalInfoObject()
+            ? this.cardData.additionalInfo.text
+            : this.cardData.additionalInfo;
+    }
+    getIconStyles() {
+        if (this.isIconObject()) {
+            const icon = this.cardData.icon;
+            return {
+                color: icon.color || PTMetricCardComponent.DEFAULT_ICON_COLOR,
+                fontSize: icon.fontSize || PTMetricCardComponent.DEFAULT_ICON_SIZE,
+            };
+        }
+        return {};
+    }
+    getTitleStyles() {
+        if (this.isTitleObject()) {
+            const title = this.cardData.title;
+            return {
+                color: title.color || PTMetricCardComponent.DEFAULT_TITLE_COLOR,
+                fontSize: title.fontSize || PTMetricCardComponent.DEFAULT_TITLE_SIZE,
+            };
+        }
+        return {};
+    }
+    getValueStyles() {
+        if (this.isValueObject()) {
+            const value = this.cardData.value;
+            return {
+                color: value.color || PTMetricCardComponent.DEFAULT_VALUE_COLOR,
+                fontSize: value.fontSize || PTMetricCardComponent.DEFAULT_VALUE_SIZE,
+            };
+        }
+        else {
+            return {
+                color: PTMetricCardComponent.DEFAULT_VALUE_COLOR,
+                fontSize: PTMetricCardComponent.DEFAULT_VALUE_SIZE,
+            };
+        }
+    }
+    getLabelStyles(position) {
+        const label = this.cardData.value?.label;
+        if (this.isLabelObject(label) &&
+            label.position === position) {
+            return {
+                color: label.color ||
+                    PTMetricCardComponent.DEFAULT_LABEL_COLOR,
+                fontSize: label.fontSize ||
+                    PTMetricCardComponent.DEFAULT_LABEL_SIZE,
+            };
+        }
+        else {
+            return {
+                color: PTMetricCardComponent.DEFAULT_LABEL_COLOR,
+                fontSize: PTMetricCardComponent.DEFAULT_LABEL_SIZE,
+            };
+        }
+    }
+    getAdditionalInfoStyles() {
+        if (this.isAdditionalInfoObject()) {
+            const additionalInfo = this.cardData.additionalInfo;
+            return {
+                color: additionalInfo.color ||
+                    PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_COLOR,
+                fontSize: additionalInfo.fontSize ||
+                    PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_SIZE,
+            };
+        }
+        else {
+            return {
+                color: PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_COLOR,
+                fontSize: PTMetricCardComponent.DEFAULT_ADDITIONAL_INFO_SIZE,
+            };
+        }
+    }
+    isLabelOnLeft() {
+        const label = this.cardData.value?.label;
+        return (this.isLabelObject(label) && label.position === 'left');
+    }
+    isLabelOnRight() {
+        const label = this.cardData.value?.label;
+        return (this.isLabelObject(label) && label.position === 'right');
+    }
+    getBackgroundStyle() {
+        return {
+            'background-color': this.cardData.appearance?.backgroundColor ||
+                PTMetricCardComponent.DEFAULT_BACKGROUND_COLOR,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMetricCardComponent, selector: "pt-metric-card", inputs: { cardData: "cardData" }, ngImport: i0, template: "<div\n  class=\"metric-card-container\"\n  [ngStyle]=\"{\n    'min-width': cardData.size?.minWidth || '100%',\n    'max-width': cardData.size?.maxWidth || 'calc(25% - 16px)',\n    width: cardData.size?.fixedWidth || 'auto'\n  }\"\n>\n  <div\n    *ngIf=\"cardData.verticalLine?.show\"\n    class=\"vertical-line\"\n    [ngStyle]=\"{\n      'background-color': cardData.verticalLine?.color || '#5a67d8'\n    }\"\n  ></div>\n\n  <div class=\"metric-card\" [ngStyle]=\"getBackgroundStyle()\">\n    <div class=\"metric-card-header\">\n      <i\n        *ngIf=\"isIconObject()\"\n        [ngClass]=\"getIconText()\"\n        [ngStyle]=\"getIconStyles()\"\n      ></i>\n      <i *ngIf=\"!isIconObject()\" [ngClass]=\"cardData.icon\"></i>\n\n      <span\n        *ngIf=\"isTitleObject()\"\n        class=\"metric-card-header-text\"\n        [ngStyle]=\"getTitleStyles()\"\n      >\n        {{ getTitleText() }}\n      </span>\n      <span *ngIf=\"!isTitleObject()\" class=\"metric-card-header-text\">\n        {{ cardData.title }}\n      </span>\n    </div>\n\n    <div class=\"metric-card-content\">\n      <div class=\"metric-value\" [ngStyle]=\"getValueStyles()\">\n        <span\n          *ngIf=\"isLabelOnLeft()\"\n          class=\"value-label\"\n          [ngStyle]=\"getLabelStyles('left')\"\n        >\n          {{ getLabelText() }}\n        </span>\n\n        <span [ngStyle]=\"getValueStyles()\">{{ getValueText() }}</span>\n\n        <span\n          *ngIf=\"isLabelOnRight()\"\n          class=\"value-label\"\n          [ngStyle]=\"getLabelStyles('right')\"\n        >\n          {{ getLabelText() }}\n        </span>\n      </div>\n\n      <div\n        *ngIf=\"cardData.divider?.show\"\n        class=\"metric-divider\"\n        [ngStyle]=\"{ backgroundColor: cardData.divider?.color || '#e2e8f0' }\"\n      ></div>\n\n      <div\n        *ngIf=\"isAdditionalInfoObject()\"\n        class=\"metric-additional-info\"\n        [ngStyle]=\"getAdditionalInfoStyles()\"\n      >\n        {{ getAdditionalInfoText() }}\n      </div>\n      <div\n        *ngIf=\"!isAdditionalInfoObject()\"\n        class=\"metric-additional-info\"\n        [ngStyle]=\"getAdditionalInfoStyles()\"\n      >\n        {{ cardData.additionalInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".metric-card-container{display:flex;align-items:stretch;box-sizing:border-box}.vertical-line{width:4px;border-radius:8px 0 0 8px;margin-right:-4px;z-index:2}.metric-card{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px #0000001a;padding:16px;display:flex;flex-direction:column;box-sizing:border-box;margin-left:0}.metric-card-header{display:flex;align-items:center;margin-bottom:16px}.metric-card-header i.icon-text{margin-right:8px}.metric-card-content{display:flex;flex-direction:column;justify-content:space-between}.metric-number{font-weight:700}.metric-label{margin-left:8px}.metric-divider{width:100%;height:1px;margin:16px 0}.metric-additional-info{margin-top:8px}.metric-card-header-text{margin-left:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-metric-card', template: "<div\n  class=\"metric-card-container\"\n  [ngStyle]=\"{\n    'min-width': cardData.size?.minWidth || '100%',\n    'max-width': cardData.size?.maxWidth || 'calc(25% - 16px)',\n    width: cardData.size?.fixedWidth || 'auto'\n  }\"\n>\n  <div\n    *ngIf=\"cardData.verticalLine?.show\"\n    class=\"vertical-line\"\n    [ngStyle]=\"{\n      'background-color': cardData.verticalLine?.color || '#5a67d8'\n    }\"\n  ></div>\n\n  <div class=\"metric-card\" [ngStyle]=\"getBackgroundStyle()\">\n    <div class=\"metric-card-header\">\n      <i\n        *ngIf=\"isIconObject()\"\n        [ngClass]=\"getIconText()\"\n        [ngStyle]=\"getIconStyles()\"\n      ></i>\n      <i *ngIf=\"!isIconObject()\" [ngClass]=\"cardData.icon\"></i>\n\n      <span\n        *ngIf=\"isTitleObject()\"\n        class=\"metric-card-header-text\"\n        [ngStyle]=\"getTitleStyles()\"\n      >\n        {{ getTitleText() }}\n      </span>\n      <span *ngIf=\"!isTitleObject()\" class=\"metric-card-header-text\">\n        {{ cardData.title }}\n      </span>\n    </div>\n\n    <div class=\"metric-card-content\">\n      <div class=\"metric-value\" [ngStyle]=\"getValueStyles()\">\n        <span\n          *ngIf=\"isLabelOnLeft()\"\n          class=\"value-label\"\n          [ngStyle]=\"getLabelStyles('left')\"\n        >\n          {{ getLabelText() }}\n        </span>\n\n        <span [ngStyle]=\"getValueStyles()\">{{ getValueText() }}</span>\n\n        <span\n          *ngIf=\"isLabelOnRight()\"\n          class=\"value-label\"\n          [ngStyle]=\"getLabelStyles('right')\"\n        >\n          {{ getLabelText() }}\n        </span>\n      </div>\n\n      <div\n        *ngIf=\"cardData.divider?.show\"\n        class=\"metric-divider\"\n        [ngStyle]=\"{ backgroundColor: cardData.divider?.color || '#e2e8f0' }\"\n      ></div>\n\n      <div\n        *ngIf=\"isAdditionalInfoObject()\"\n        class=\"metric-additional-info\"\n        [ngStyle]=\"getAdditionalInfoStyles()\"\n      >\n        {{ getAdditionalInfoText() }}\n      </div>\n      <div\n        *ngIf=\"!isAdditionalInfoObject()\"\n        class=\"metric-additional-info\"\n        [ngStyle]=\"getAdditionalInfoStyles()\"\n      >\n        {{ cardData.additionalInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".metric-card-container{display:flex;align-items:stretch;box-sizing:border-box}.vertical-line{width:4px;border-radius:8px 0 0 8px;margin-right:-4px;z-index:2}.metric-card{background-color:#fff;border-radius:5px;box-shadow:0 1px 3px #0000001a;padding:16px;display:flex;flex-direction:column;box-sizing:border-box;margin-left:0}.metric-card-header{display:flex;align-items:center;margin-bottom:16px}.metric-card-header i.icon-text{margin-right:8px}.metric-card-content{display:flex;flex-direction:column;justify-content:space-between}.metric-number{font-weight:700}.metric-label{margin-left:8px}.metric-divider{width:100%;height:1px;margin:16px 0}.metric-additional-info{margin-top:8px}.metric-card-header-text{margin-left:6px}\n"] }]
+        }], propDecorators: { cardData: [{
+                type: Input
+            }] } });
+
+class PTMetricCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardModule, declarations: [PTMetricCardComponent], imports: [CommonModule], exports: [PTMetricCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMetricCardComponent],
+                    imports: [CommonModule],
+                    exports: [PTMetricCardComponent],
+                }]
+        }] });
+
+class PTMetricCardGroupComponent {
+    constructor() {
+        this.cardsData = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMetricCardGroupComponent, selector: "pt-metric-card-group", inputs: { cardsData: "cardsData" }, ngImport: i0, template: "<div class=\"metric-card-group\">\n  <pt-metric-card\n    *ngFor=\"let card of cardsData\"\n    [cardData]=\"card\"\n  ></pt-metric-card>\n</div>\n", styles: [".metric-card-group{display:flex;gap:16px;flex-wrap:wrap;width:100%}.metric-card{flex:0 1 auto;max-width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PTMetricCardComponent, selector: "pt-metric-card", inputs: ["cardData"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-metric-card-group', template: "<div class=\"metric-card-group\">\n  <pt-metric-card\n    *ngFor=\"let card of cardsData\"\n    [cardData]=\"card\"\n  ></pt-metric-card>\n</div>\n", styles: [".metric-card-group{display:flex;gap:16px;flex-wrap:wrap;width:100%}.metric-card{flex:0 1 auto;max-width:250px}\n"] }]
+        }], propDecorators: { cardsData: [{
+                type: Input
+            }] } });
+
+class PTMetricCardGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupModule, declarations: [PTMetricCardGroupComponent], imports: [CommonModule, PTMetricCardModule], exports: [PTMetricCardGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupModule, imports: [CommonModule, PTMetricCardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMetricCardGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMetricCardGroupComponent],
+                    imports: [CommonModule, PTMetricCardModule],
+                    exports: [PTMetricCardGroupComponent],
+                }]
+        }] });
+
+class PTChartComponent {
+    constructor() {
+        Chart.register(...registerables, ChartDataLabels);
+    }
+    ngOnInit() {
+        this.initializeChart();
+    }
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+    initializeChart() {
+        const canvas = document.querySelector('canvas');
+        const config = {
+            type: this.chartConfig.type,
+            data: this.chartConfig.data,
+            options: {
+                ...this.chartConfig.options,
+                plugins: {
+                    datalabels: {
+                        formatter: (value, context) => {
+                            const data = context.chart.data.datasets[0].data;
+                            const total = data.reduce((sum, val) => sum + val, 0);
+                            const percentage = ((value / total) * 100).toFixed(1) + '%';
+                            return percentage;
+                        },
+                        color: '#000', // Color of the percentage text
+                        font: {
+                            weight: 'bold',
+                        },
+                    },
+                    ...this.chartConfig.options?.plugins,
+                },
+            },
+        };
+        this.chart = new Chart(canvas, config);
+    }
+    updateChart() {
+        if (this.chart) {
+            this.chart.data = this.chartConfig.data;
+            if (this.chartConfig.options) {
+                this.chart.options = this.chartConfig.options;
+            }
+            this.chart.update();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTChartComponent, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, ngImport: i0, template: "<div style=\"position: relative; height: 100%; width: 100%\">\n  <canvas></canvas>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-chart', template: "<div style=\"position: relative; height: 100%; width: 100%\">\n  <canvas></canvas>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { chartConfig: [{
+                type: Input
+            }] } });
+
+class PTChartModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTChartModule, declarations: [PTChartComponent], imports: [CommonModule], exports: [PTChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTChartComponent],
+                    imports: [CommonModule],
+                    exports: [PTChartComponent],
+                }]
+        }] });
+
+class PTMenuComponent {
+    constructor() {
+        this.config = {
+            icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
+        };
+        this.isOpen = false;
+    }
+    static { this.DEFAULT_TEXT_COLOR = '#000'; }
+    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_COLOR = '#000'; }
+    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
+    toggleMenu() {
+        this.isOpen = !this.isOpen;
+    }
+    closeMenu() {
+        this.isOpen = false;
+    }
+    getMenuItemIconClass(item) {
+        return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
+    }
+    getMenuItemIconStyles(item) {
+        if (typeof item.icon !== 'string') {
+            return {
+                color: item.icon?.color || PTMenuComponent.DEFAULT_ICON_COLOR,
+                fontSize: item.icon?.fontSize || PTMenuComponent.DEFAULT_ICON_FONT_SIZE,
+            };
+        }
+        return {
+            color: PTMenuComponent.DEFAULT_ICON_COLOR,
+            fontSize: PTMenuComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getIconClass() {
+        return this.config.icon?.code || PTMenuComponent.DEFAULT_ICON_CODE;
+    }
+    getIconStyles() {
+        return {
+            color: this.config.color ||
+                this.config.icon?.color ||
+                PTMenuComponent.DEFAULT_ICON_COLOR,
+            fontSize: this.config.fontSize ||
+                this.config.icon?.fontSize ||
+                PTMenuComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getTextStyles(item) {
+        return {
+            color: item.color || PTMenuComponent.DEFAULT_TEXT_COLOR,
+            fontSize: item.fontSize || PTMenuComponent.DEFAULT_TEXT_FONT_SIZE,
+        };
+    }
+    // Listen to all clicks on the document
+    onDocumentClick(event) {
+        const clickedInside = event.target.closest('.menu-container');
+        if (!clickedInside) {
+            this.closeMenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMenuComponent, selector: "pt-menu", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"menu-container\" [ngClass]=\"{ open: isOpen }\">\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".menu-container{position:relative;display:inline-block}.menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.menu-item i{margin-right:10px}.menu-item:hover{background-color:#f1f1f1}.menu-container.open .menu-dropdown{display:block}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-menu', template: "<div class=\"menu-container\" [ngClass]=\"{ open: isOpen }\">\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".menu-container{position:relative;display:inline-block}.menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.menu-item i{margin-right:10px}.menu-item:hover{background-color:#f1f1f1}.menu-container.open .menu-dropdown{display:block}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PTCardComponent {
+    constructor() {
+        this.config = {};
+    }
+    static { this.DEFAULT_TITLE_COLOR = '#333'; }
+    static { this.DEFAULT_TITLE_FONT_SIZE = '1.5em'; }
+    static { this.DEFAULT_ICON_COLOR = '#333'; }
+    static { this.DEFAULT_ICON_FONT_SIZE = '1em'; }
+    static { this.DEFAULT_ICON_POSITION = 'left'; }
+    static { this.DEFAULT_BACKGROUND_COLOR = '#fff'; }
+    static { this.DEFAULT_WIDTH = '100%'; }
+    static { this.DEFAULT_HEIGHT = 'auto'; }
+    static { this.DEFAULT_TITLE_POSITION = 'left'; }
+    static { this.DEFAULT_MENU_POSITION = 'right'; }
+    static { this.DEFAULT_BORDER_COLOR = '#ddd'; }
+    static { this.DEFAULT_BORDER_WIDTH = '1px'; }
+    isTitleObject() {
+        return typeof this.config.title === 'object';
+    }
+    getTitleText() {
+        return this.isTitleObject()
+            ? this.config.title.text
+            : this.config.title;
+    }
+    getTitleStyles() {
+        const title = this.config.title;
+        const alignMap = {
+            left: 'flex-start',
+            center: 'center',
+            right: 'flex-end',
+        };
+        return {
+            color: title?.color || PTCardComponent.DEFAULT_TITLE_COLOR,
+            fontSize: title?.fontSize || PTCardComponent.DEFAULT_TITLE_FONT_SIZE,
+            '--text-align': alignMap[title?.position || PTCardComponent.DEFAULT_TITLE_POSITION],
+        };
+    }
+    getIconClass() {
+        const icon = this.config.title?.icon;
+        return typeof icon === 'string' ? icon : icon?.code || null;
+    }
+    getIconStyles() {
+        const icon = this.config.title?.icon;
+        if (typeof icon !== 'string') {
+            return {
+                color: icon?.color || PTCardComponent.DEFAULT_ICON_COLOR,
+                fontSize: icon?.fontSize || PTCardComponent.DEFAULT_ICON_FONT_SIZE,
+            };
+        }
+        return {
+            color: PTCardComponent.DEFAULT_ICON_COLOR,
+            fontSize: PTCardComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getIconPosition() {
+        const icon = this.config.title?.icon;
+        if (typeof icon !== 'string' && icon?.position) {
+            return icon.position;
+        }
+        return PTCardComponent.DEFAULT_ICON_POSITION;
+    }
+    getMenuPosition() {
+        return this.config.menuPosition || PTCardComponent.DEFAULT_MENU_POSITION;
+    }
+    getCardStyles() {
+        return {
+            backgroundColor: this.config.backgroundColor || PTCardComponent.DEFAULT_BACKGROUND_COLOR,
+            width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
+            height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
+            borderColor: this.config.borderColor || PTCardComponent.DEFAULT_BORDER_COLOR,
+            borderWidth: this.config.borderWidth || PTCardComponent.DEFAULT_BORDER_WIDTH,
+            borderStyle: 'solid',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"card\" [ngStyle]=\"getCardStyles()\">\n  <div class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card{border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin:16px 0;display:flex;flex-direction:column}.card-body{flex-grow:1}.card-header-icon-left{margin-right:6px}.card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.card-header-icon-right{margin-left:6px}.menu-left{position:absolute;left:0;top:0}.menu-right{position:absolute;right:0;top:-2px}.card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-card', template: "<div class=\"card\" [ngStyle]=\"getCardStyles()\">\n  <div class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card{border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin:16px 0;display:flex;flex-direction:column}.card-body{flex-grow:1}.card-header-icon-left{margin-right:6px}.card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.card-header-icon-right{margin-left:6px}.menu-left{position:absolute;left:0;top:0}.menu-right{position:absolute;right:0;top:-2px}.card-menu{margin-left:auto;cursor:pointer}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class PTMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMenuModule, declarations: [PTMenuComponent], imports: [CommonModule], exports: [PTMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMenuComponent],
+                    imports: [CommonModule],
+                    exports: [PTMenuComponent],
+                }]
+        }] });
+
+class PTCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTCardModule, declarations: [PTCardComponent], imports: [CommonModule, PTMenuModule], exports: [PTCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardModule, imports: [CommonModule, PTMenuModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTCardComponent],
+                    imports: [CommonModule, PTMenuModule],
+                    exports: [PTCardComponent],
+                }]
+        }] });
+
 class NgPrimeToolsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
@@ -1715,7 +2157,16 @@ class NgPrimeToolsModule {
             PTNumberInputModule,
             PTSwitchInputModule,
             PTTextAreaInputModule,
-            PTTextInputModule], exports: [NgAdvancedPrimeTableModule,
+            PTTextInputModule,
+            // Dashboard
+            PTMetricCardModule,
+            PTMetricCardGroupModule,
+            // Chart
+            PTChartModule,
+            // Cards
+            PTCardModule,
+            // Menu
+            PTMenuModule], exports: [NgAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -1724,7 +2175,16 @@ class NgPrimeToolsModule {
             PTNumberInputModule,
             PTSwitchInputModule,
             PTTextAreaInputModule,
-            PTTextInputModule] }); }
+            PTTextInputModule,
+            // Dashboard
+            PTMetricCardModule,
+            PTMetricCardGroupModule,
+            // Chart
+            PTChartModule,
+            // Cards
+            PTCardModule,
+            // Menu
+            PTMenuModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
             NgAdvancedPrimeTableModule,
@@ -1736,7 +2196,16 @@ class NgPrimeToolsModule {
             PTNumberInputModule,
             PTSwitchInputModule,
             PTTextAreaInputModule,
-            PTTextInputModule, NgAdvancedPrimeTableModule,
+            PTTextInputModule,
+            // Dashboard
+            PTMetricCardModule,
+            PTMetricCardGroupModule,
+            // Chart
+            PTChartModule,
+            // Cards
+            PTCardModule,
+            // Menu
+            PTMenuModule, NgAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -1745,7 +2214,16 @@ class NgPrimeToolsModule {
             PTNumberInputModule,
             PTSwitchInputModule,
             PTTextAreaInputModule,
-            PTTextInputModule] }); }
+            PTTextInputModule,
+            // Dashboard
+            PTMetricCardModule,
+            PTMetricCardGroupModule,
+            // Chart
+            PTChartModule,
+            // Cards
+            PTCardModule,
+            // Menu
+            PTMenuModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, decorators: [{
             type: NgModule,
@@ -1763,6 +2241,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTSwitchInputModule,
                         PTTextAreaInputModule,
                         PTTextInputModule,
+                        // Dashboard
+                        PTMetricCardModule,
+                        PTMetricCardGroupModule,
+                        // Chart
+                        PTChartModule,
+                        // Cards
+                        PTCardModule,
+                        // Menu
+                        PTMenuModule,
                     ],
                     exports: [
                         NgAdvancedPrimeTableModule,
@@ -1775,18 +2262,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTSwitchInputModule,
                         PTTextAreaInputModule,
                         PTTextInputModule,
+                        // Dashboard
+                        PTMetricCardModule,
+                        PTMetricCardGroupModule,
+                        // Chart
+                        PTChartModule,
+                        // Cards
+                        PTCardModule,
+                        // Menu
+                        PTMenuModule,
                     ],
                 }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ng-prime-tools/models" />
+// Advanced table
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDropdownComponent, PTDropdownModule, PTFormBuilderComponent, PTFormBuilderModule, PTNumberInputComponent, PTNumberInputModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
+export { ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDropdownComponent, PTDropdownModule, PTFormBuilderComponent, PTFormBuilderModule, PTMenuComponent, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNumberInputComponent, PTNumberInputModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map