ng-prime-tools 0.0.1 → 1.0.4

package/fesm2022/ng-prime-tools.mjs

@@ -1,59 +1,30 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Pipe, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import * as i2 from 'primeng/table';
-import { TableModule } from 'primeng/table';
+import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i7 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import * as i2 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i3 from 'primeng/api';
+import * as i4 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 import * as i5 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i6 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i4 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
+import * as i7 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import * as i8 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i9 from 'primeng/iconfield';
+import * as i9 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
+import * as i10 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i10 from 'primeng/inputicon';
+import * as i11 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
-import * as i11 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i3 from 'primeng/api';
-
-class AdvancedPrimeToolsService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedPrimeToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedPrimeToolsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedPrimeToolsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class AdvancedPrimeToolsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedPrimeToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AdvancedPrimeToolsComponent, isStandalone: true, selector: "lib-ng-prime-tools", ngImport: i0, template: ` <p>ng-prime-tools works!</p> `, isInline: true, styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedPrimeToolsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-ng-prime-tools', standalone: true, imports: [], template: ` <p>ng-prime-tools works!</p> ` }]
-        }] });
-
-var TableTypeEnum;
-(function (TableTypeEnum) {
-    TableTypeEnum["DATE"] = "DATE";
-    TableTypeEnum["STRING"] = "STRING";
-    TableTypeEnum["AMOUNT"] = "AMOUNT";
-    TableTypeEnum["NUMBER"] = "NUMBER";
-    TableTypeEnum["MULTISELECT"] = "MULTISELECT";
-    TableTypeEnum["CURRENCY"] = "CURRENCY";
-    TableTypeEnum["BOOLEAN"] = "BOOLEAN";
-    TableTypeEnum["ACTION"] = "ACTION";
-})(TableTypeEnum || (TableTypeEnum = {}));
+import * as i8$1 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i9$1 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
 
 class CustomCurrencyPipe {
     transform(value, currency = 'MAD', decimalPlaces) {
@@ -80,10 +51,10 @@ class CustomCurrencyPipe {
         }
         return formattedCurrency;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CustomCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: CustomCurrencyPipe, isStandalone: true, name: "customCurrency" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: CustomCurrencyPipe, isStandalone: true, name: "customCurrency" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CustomCurrencyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'customCurrency',
@@ -91,7 +62,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }] });
 
-class AdvancedTableComponent {
+class CustomDatePipe {
+    transform(value, format = 'dd/MM/yyyy') {
+        if (!value)
+            return null;
+        if (typeof value === 'string') {
+            const parts = value.split('/');
+            if (parts.length === 3) {
+                const day = parseInt(parts[0], 10);
+                const month = parseInt(parts[1], 10) - 1;
+                const year = parseInt(parts[2], 10);
+                const date = new Date(year, month, day);
+                if (isNaN(date.getTime()))
+                    return null;
+                const options = {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                };
+                return new Intl.DateTimeFormat('en-GB', options).format(date);
+            }
+        }
+        else if (value instanceof Date) {
+            // If the value is already a Date object
+            const options = {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+            };
+            return new Intl.DateTimeFormat('en-GB', options).format(value);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: CustomDatePipe, name: "customDate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customDate',
+                }]
+        }] });
+
+class NgAdvancedPrimeTableComponent {
     constructor() {
         // Inputs
         this.data = [];
@@ -128,8 +141,8 @@ class AdvancedTableComponent {
         // Transform the date fields based on column metadata
         this.data = this.formatingDateFields();
         this.globalFilterFields = this.columns
-            .map((col) => col.code)
-            .filter((code) => code !== undefined);
+            .filter((col) => col.code !== undefined && col.isFilter !== false)
+            .map((col) => col.code);
         this.initializePagination();
         this.initializeActions();
         // Set default value for isSortable
@@ -183,7 +196,10 @@ class AdvancedTableComponent {
     }
     initializePagination() {
         if (this.isPaginated) {
-            this.rowsPerPage = this.rowsPerPage || [20, 30, 40];
+            // Check if rowsPerPage is undefined or an empty array
+            if (!this.rowsPerPage || this.rowsPerPage.length === 0) {
+                this.rowsPerPage = [20, 30, 40];
+            }
             this.rows = this.rowsPerPage[0];
         }
     }
@@ -306,26 +322,60 @@ class AdvancedTableComponent {
     }
     filterGlobal(event) {
         const target = event.target;
-        this.dt.filterGlobal(target.value, 'contains');
+        const value = target.value.toLowerCase();
+        // Create a new filtered dataset
+        const filteredData = this.data.filter((item) => {
+            return this.globalFilterFields.some((field) => {
+                const column = this.columns.find((col) => col.code === field);
+                if (!column) {
+                    return false;
+                }
+                // Handle different column types
+                if (column.type === TableTypeEnum.DATE) {
+                    const itemDate = this.formatDate(item[field]);
+                    return itemDate && itemDate.includes(value);
+                }
+                else if (column.type === TableTypeEnum.AMOUNT ||
+                    column.type === TableTypeEnum.NUMBER) {
+                    return (item[field] && item[field].toString().toLowerCase().includes(value));
+                }
+                else {
+                    return (item[field] && item[field].toString().toLowerCase().includes(value));
+                }
+            });
+        });
+        // Update the table's value
+        this.dt.value = filteredData;
+    }
+    formatDate(date) {
+        if (!date)
+            return '';
+        if (date instanceof Date) {
+            // Handle Date object
+            const day = date.getDate().toString().padStart(2, '0');
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+            const year = date.getFullYear().toString();
+            return `${day}/${month}/${year}`;
+        }
+        else if (typeof date === 'string') {
+            // Handle string date
+            const parts = date.split('/');
+            if (parts.length === 3) {
+                return `${parts[0]}/${parts[1]}/${parts[2]}`;
+            }
+            else {
+                // Handle partial dates
+                return date;
+            }
+        }
+        return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AdvancedTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AdvancedTableComponent, isStandalone: true, selector: "advanced-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable" }, outputs: { filter: "filter", search: "search" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\n      dataKey=\"id\"\n      [rows]=\"rows\"\n      [paginator]=\"isPaginated\"\n      [globalFilterFields]=\"globalFilterFields\"\n      styleClass=\"p-datatable-gridlines\"\n      [rowsPerPageOptions]=\"rowsPerPage\"\n      styleClass=\"p-datatable-striped\"\n      editMode=\"row\"\n      [globalFilterFields]=\"globalFilterFields\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"flex\">\n          <div>\n            <h3>Total: {{ totalRecords }}</h3>\n          </div>\n\n          <div>\n            <p-button\n              label=\"Clear\"\n              [outlined]=\"true\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n              class=\"bt-filter-btn\"\n            />\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] | date : \"dd/MM/yyyy\" }}\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                          }}\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                      }}\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CalendarModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { 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: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i9.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i10.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i11.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    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", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable" }, outputs: { filter: "filter", search: "search" }, 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            <p-button\n              label=\"Clear\"\n              [outlined]=\"true\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n              class=\"bt-filter-btn\"\n            />\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                          }}\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                      }}\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}\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: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "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: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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: "18.0.3", ngImport: i0, type: AdvancedTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'advanced-table', standalone: true, imports: [
-                        CommonModule,
-                        TableModule,
-                        InputTextModule,
-                        ButtonModule,
-                        CalendarModule,
-                        FormsModule,
-                        MultiSelectModule,
-                        CustomCurrencyPipe,
-                        IconFieldModule,
-                        InputIconModule,
-                        TagModule,
-                    ], template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\n      dataKey=\"id\"\n      [rows]=\"rows\"\n      [paginator]=\"isPaginated\"\n      [globalFilterFields]=\"globalFilterFields\"\n      styleClass=\"p-datatable-gridlines\"\n      [rowsPerPageOptions]=\"rowsPerPage\"\n      styleClass=\"p-datatable-striped\"\n      editMode=\"row\"\n      [globalFilterFields]=\"globalFilterFields\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"flex\">\n          <div>\n            <h3>Total: {{ totalRecords }}</h3>\n          </div>\n\n          <div>\n            <p-button\n              label=\"Clear\"\n              [outlined]=\"true\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n              class=\"bt-filter-btn\"\n            />\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] | date : \"dd/MM/yyyy\" }}\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                          }}\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                      }}\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}\n"] }]
+            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            <p-button\n              label=\"Clear\"\n              [outlined]=\"true\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n              class=\"bt-filter-btn\"\n            />\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                          }}\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                      }}\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -350,16 +400,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Output
             }], dt: [{
                 type: ViewChild,
-                args: ['dt', { static: true }]
+                args: ['dt', { static: false }]
             }] } });
 
-/*
- * Public API Surface of ng-prime-tools
+class NgAdvancedPrimeTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, declarations: [NgAdvancedPrimeTableComponent, CustomDatePipe], imports: [CommonModule,
+            TableModule,
+            InputTextModule,
+            ButtonModule,
+            CalendarModule,
+            FormsModule,
+            MultiSelectModule,
+            TagModule,
+            CustomCurrencyPipe,
+            IconFieldModule,
+            InputIconModule], exports: [NgAdvancedPrimeTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, imports: [CommonModule,
+            TableModule,
+            InputTextModule,
+            ButtonModule,
+            CalendarModule,
+            FormsModule,
+            MultiSelectModule,
+            TagModule,
+            IconFieldModule,
+            InputIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgAdvancedPrimeTableComponent, CustomDatePipe],
+                    imports: [
+                        CommonModule,
+                        TableModule,
+                        InputTextModule,
+                        ButtonModule,
+                        CalendarModule,
+                        FormsModule,
+                        MultiSelectModule,
+                        TagModule,
+                        CustomCurrencyPipe,
+                        IconFieldModule,
+                        InputIconModule,
+                    ],
+                    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";
+    TableTypeEnum["STRING"] = "STRING";
+    TableTypeEnum["AMOUNT"] = "AMOUNT";
+    TableTypeEnum["NUMBER"] = "NUMBER";
+    TableTypeEnum["MULTISELECT"] = "MULTISELECT";
+    TableTypeEnum["CURRENCY"] = "CURRENCY";
+    TableTypeEnum["BOOLEAN"] = "BOOLEAN";
+    TableTypeEnum["ACTION"] = "ACTION";
+})(TableTypeEnum || (TableTypeEnum = {}));
+
+var SearchCriteriaTypeEnum;
+(function (SearchCriteriaTypeEnum) {
+    SearchCriteriaTypeEnum["DATE"] = "DATE";
+    SearchCriteriaTypeEnum["DATERANGE"] = "DATERANGE";
+    SearchCriteriaTypeEnum["STRING"] = "STRING";
+    SearchCriteriaTypeEnum["AMOUNT"] = "AMOUNT";
+    SearchCriteriaTypeEnum["NUMBER"] = "NUMBER";
+    SearchCriteriaTypeEnum["MULTISELECT"] = "MULTISELECT";
+})(SearchCriteriaTypeEnum || (SearchCriteriaTypeEnum = {}));
+
+// projects/ng-prime-tools/src/lib/enums/public_api.ts
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ng-prime-tools/enums" />
+
+class MultiSearchCriteriaComponent {
+    constructor() {
+        this.SearchCriteriaTypeEnum = SearchCriteriaTypeEnum;
+        this.title = '';
+        this.criteria = [];
+        this.inputsPerRow = 3;
+        this.data = [];
+        this.filteredData = new EventEmitter();
+        this.selectAll = false;
+        this.selected = [];
+    }
+    ngOnInit() {
+        this.criteria.forEach((item) => {
+            if (item.type === SearchCriteriaTypeEnum.MULTISELECT &&
+                item.filterOptions) {
+                this.selected = [...item.filterOptions];
+                item.value = this.selected;
+            }
+        });
+    }
+    getCurrencySymbol(input) {
+        return input.currency || 'EUR';
+    }
+    search() {
+        console.log('Original Data:', this.data);
+        const filtered = this.data.filter((item) => {
+            return this.criteria.every((criterion) => {
+                console.log('Criterion:', criterion);
+                if (criterion.type === SearchCriteriaTypeEnum.DATERANGE) {
+                    const [startDate, endDate] = criterion.value || [
+                        undefined,
+                        undefined,
+                    ];
+                    const itemDate = this.parseDate(item[criterion.code] || item['date']);
+                    console.log('Item Date:', itemDate, 'Start Date:', startDate, 'End Date:', endDate);
+                    if (!startDate && !endDate) {
+                        return true;
+                    }
+                    if (itemDate === null) {
+                        return false;
+                    }
+                    const parsedStartDate = startDate ? this.parseDate(startDate) : null;
+                    const parsedEndDate = endDate ? this.parseDate(endDate) : null;
+                    console.log('Parsed Start Date:', parsedStartDate, 'Parsed End Date:', parsedEndDate);
+                    return ((!parsedStartDate || itemDate >= parsedStartDate) &&
+                        (!parsedEndDate || itemDate <= parsedEndDate));
+                }
+                else if (criterion.type === SearchCriteriaTypeEnum.AMOUNT) {
+                    return !criterion.value || item[criterion.code] === criterion.value;
+                }
+                else if (criterion.type === SearchCriteriaTypeEnum.MULTISELECT) {
+                    return (!criterion.value ||
+                        criterion.value.some((option) => option.label === item[criterion.code]));
+                }
+                else if (criterion.type === SearchCriteriaTypeEnum.STRING) {
+                    return (!criterion.value ||
+                        item[criterion.code]
+                            .toString()
+                            .toLowerCase()
+                            .includes(criterion.value.toString().toLowerCase()));
+                }
+                return true;
+            });
+        });
+        console.log('Filtered Data:', filtered);
+        this.filteredData.emit(filtered);
+    }
+    clear() {
+        this.criteria.forEach((input) => {
+            input.value = null;
+        });
+        this.filteredData.emit(this.data);
+    }
+    onSelectAllChange(event) {
+        this.selectAll = event.checked;
+        this.selected = event.checked
+            ? [
+                ...(this.criteria.find((criterion) => criterion.type === SearchCriteriaTypeEnum.MULTISELECT)?.filterOptions || []),
+            ]
+            : [];
+    }
+    parseDate(dateString) {
+        if (!dateString) {
+            return null;
+        }
+        if (Object.prototype.toString.call(dateString) === '[object Date]') {
+            return dateString;
+        }
+        const parts = dateString.split('/');
+        if (parts.length === 3) {
+            const day = parseInt(parts[0], 10);
+            const month = parseInt(parts[1], 10) - 1;
+            const year = parseInt(parts[2], 10);
+            const date = new Date(year, month, day);
+            return isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MultiSearchCriteriaComponent, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data" }, outputs: { filteredData: "filteredData" }, ngImport: i0, template: "<p-panel header=\"{{ title }}\" [toggleable]=\"true\" [collapsed]=\"true\">\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: ["::ng-deep .p-element .p-hidden-accessible input{display:none}::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}::ng-deep .custom-multiselect{width:100%}::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}::ng-deep .p-inputtext{width:100%}::ng-deep .p-calendar .p-inputtext{width:100%}::ng-deep .p-inputnumber{width:100%}.criteria-container{display:grid;gap:10px}.criteria-item{margin-bottom:10px;box-sizing:border-box}.full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.footer-buttons{display:flex;justify-content:flex-end;gap:10px}::ng-deep .footer-button button{width:140px;cursor:pointer}::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'multi-search-criteria', template: "<p-panel header=\"{{ title }}\" [toggleable]=\"true\" [collapsed]=\"true\">\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: ["::ng-deep .p-element .p-hidden-accessible input{display:none}::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}::ng-deep .custom-multiselect{width:100%}::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}::ng-deep .p-inputtext{width:100%}::ng-deep .p-calendar .p-inputtext{width:100%}::ng-deep .p-inputnumber{width:100%}.criteria-container{display:grid;gap:10px}.criteria-item{margin-bottom:10px;box-sizing:border-box}.full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.footer-buttons{display:flex;justify-content:flex-end;gap:10px}::ng-deep .footer-button button{width:140px;cursor:pointer}::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], criteria: [{
+                type: Input
+            }], inputsPerRow: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], filteredData: [{
+                type: Output
+            }] } });
+
+class MultiSearchCriteriaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaModule, declarations: [MultiSearchCriteriaComponent], imports: [CommonModule,
+            CalendarModule,
+            InputTextModule,
+            MultiSelectModule,
+            ButtonModule,
+            FormsModule,
+            InputNumberModule,
+            PanelModule], exports: [MultiSearchCriteriaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaModule, imports: [CommonModule,
+            CalendarModule,
+            InputTextModule,
+            MultiSelectModule,
+            ButtonModule,
+            FormsModule,
+            InputNumberModule,
+            PanelModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MultiSearchCriteriaComponent],
+                    imports: [
+                        CommonModule,
+                        CalendarModule,
+                        InputTextModule,
+                        MultiSelectModule,
+                        ButtonModule,
+                        FormsModule,
+                        InputNumberModule,
+                        PanelModule,
+                    ],
+                    exports: [MultiSearchCriteriaComponent],
+                }]
+        }] });
+
+// 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 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,
+            FormsModule,
+            NgAdvancedPrimeTableModule,
+            MultiSearchCriteriaModule], exports: [NgAdvancedPrimeTableModule, MultiSearchCriteriaModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
+            FormsModule,
+            NgAdvancedPrimeTableModule,
+            MultiSearchCriteriaModule, NgAdvancedPrimeTableModule, MultiSearchCriteriaModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        NgAdvancedPrimeTableModule,
+                        MultiSearchCriteriaModule,
+                    ],
+                    exports: [NgAdvancedPrimeTableModule, MultiSearchCriteriaModule],
+                }]
+        }] });
+
+// projects/ng-prime-tools/src/lib/models/public_api.ts
+
+/**
+ * Generated bundle index. Do not edit.
  */
+/// <amd-module name="ng-prime-tools/models" />
+
+// projects/ng-prime-tools/src/public-api.ts
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedPrimeToolsComponent, AdvancedPrimeToolsService, AdvancedTableComponent, TableTypeEnum };
+export { MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map