ng-prime-tools 1.0.5 → 1.0.7

package/fesm2022/ng-prime-tools.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'primeng/table';
@@ -7,12 +7,12 @@ 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 * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i6 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i7 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/forms';
+import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/tag';
@@ -25,6 +25,18 @@ import * as i8$1 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i9$1 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
+import * as i3$2 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i3$3 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i4$1 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i3$4 from 'primeng/inputswitch';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import * as i3$5 from 'primeng/inputtextarea';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import * as i3$6 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
 
 class CustomCurrencyPipe {
     transform(value, currency, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
@@ -118,6 +130,8 @@ class NgAdvancedPrimeTableComponent {
         this.totalRecords = 0;
         this.rowsPerPage = [];
         this.hasSearchFilter = false;
+        this.hasExportExcel = false;
+        this.hasExportPDF = false;
         this.hasColumnFilter = false;
         this.isPaginated = false;
         this.actions = [];
@@ -125,6 +139,8 @@ class NgAdvancedPrimeTableComponent {
         // Outputs: Events emitted to the parent component
         this.filter = new EventEmitter();
         this.search = new EventEmitter();
+        this.exportExcelEvent = new EventEmitter();
+        this.exportPdfEvent = new EventEmitter();
         this.searchValue = '';
         this.validCurrencyCodes = ['USD', 'EUR', 'MAD'];
         // Component state properties
@@ -368,12 +384,18 @@ class NgAdvancedPrimeTableComponent {
         }
         return '';
     }
+    exportExcel() {
+        this.exportExcelEvent.emit();
+    }
+    exportPdf() {
+        this.exportPdfEvent.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", 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                                : col.thousandSeparator\n                                : col.decimalSeparator\n                          }}\n                        </ng-container>\n                        <ng-template #normalOutput>\n                          {{ data[col.code] }}\n                        </ng-template>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-template>\n                </td>\n\n                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\n                    >\n                      >\n                      {{\n                        data[col.code]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render action buttons if there are any actions defined -->\n          <td *ngIf=\"actions?.length\">\n            <div class=\"action-buttons-container\">\n              <!-- Delete button if deletion is allowed -->\n              <div *ngIf=\"isDelete\">\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"Delete(data.id)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n              <!-- Edit, save, and cancel buttons for row editing -->\n              <div>\n                <button\n                  pInitEditableRow\n                  *ngIf=\"!editing\"\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-pencil\"\n                  (click)=\"initEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pSaveEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-check\"\n                  (click)=\"saveEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pCancelEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  (click)=\"cancelEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\n      [rows]=\"rows\"\n      [paginator]=\"isPaginated\"\n      [globalFilterFields]=\"globalFilterFields\"\n      [rowsPerPageOptions]=\"rowsPerPage\"\n      dataKey=\"id\"\n      styleClass=\"p-datatable-gridlines\"\n      styleClass=\"p-datatable-striped\"\n      editMode=\"row\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"flex\">\n          <div>\n            <h3>Total: {{ totalRecords }}</h3>\n          </div>\n\n          <div>\n            <!-- Clear filters -->\n            <button\n              *ngIf=\"hasSearchFilter\"\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n\n            <!-- Export to Excel Button -->\n            <button\n              *ngIf=\"hasExportExcel\"\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n\n            <!-- Export to PDF Button -->\n            <button\n              *ngIf=\"hasExportPDF\"\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          </div>\n          <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n            <!-- Add this wrapper div with ml-auto class -->\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th *ngFor=\"let col of columns\">\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      display=\"menu\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        pTemplate=\"body\"\n        let-data\n        let-editing=\"editing\"\n        let-ri=\"rowIndex\"\n      >\n        <!-- Render a table row and make it editable if `isEdit` is true -->\n        <tr [pEditableRow]=\"isEdit ? data : null\">\n          <!-- Loop through each column and render corresponding table cells -->\n          <ng-container *ngFor=\"let col of columns\">\n            <ng-container *ngIf=\"col.code !== undefined\">\n              <!-- Check if the data for the column exists -->\n              <ng-container *ngIf=\"data[col.code] !== undefined\">\n                <!-- Render an editable cell if the column is editable -->\n                <td *ngIf=\"isEditable(col.code); else normalTD\">\n                  <!-- Multi-select input for columns that are multi-selectable -->\n                  <ng-container\n                    *ngIf=\"isMultiSelect(col.code); else datePicker\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-multiSelect\n                          appendTo=\"body\"\n                          [ngModel]=\"data[col.code]\"\n                          [style]=\"{ width: '100%' }\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [options]=\"optionValues\"\n                        ></p-multiSelect>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <div class=\"multi-select-container\">\n                          <ng-container *ngFor=\"let rec of data[col.code]\">\n                            <p-tag [value]=\"rec\"></p-tag>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <!-- Date picker input for columns that require date selection -->\n                  <ng-template #datePicker>\n                    <ng-container\n                      *ngIf=\"isDatePicker(col.code); else normalInput\"\n                    >\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-calendar\n                            [inputId]=\"data[col.code]\"\n                            [ngModel]=\"data[col.code]\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    </ng-container>\n                  </ng-template>\n\n                  <!-- Normal text input for other columns -->\n                  <ng-template #normalInput>\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[col.code]\"\n                          (change)=\"onChange($event, data.id, col.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <!-- Use currency pipe to format the output for AMOUNT type -->\n                        <ng-container\n                          *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                        >\n                          {{\n                            data[col.code]\n                              | customCurrency\n                                : getCurrencySymbol(col)\n                                : col.decimalPlaces\n                                : col.thousandSeparator\n                                : col.decimalSeparator\n                          }}\n                        </ng-container>\n                        <ng-template #normalOutput>\n                          {{ data[col.code] }}\n                        </ng-template>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-template>\n                </td>\n\n                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\n                    >\n                      >\n                      {{\n                        data[col.code]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render action buttons if there are any actions defined -->\n          <td *ngIf=\"actions?.length\">\n            <div class=\"action-buttons-container\">\n              <!-- Delete button if deletion is allowed -->\n              <div *ngIf=\"isDelete\">\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"Delete(data.id)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n              <!-- Edit, save, and cancel buttons for row editing -->\n              <div>\n                <button\n                  pInitEditableRow\n                  *ngIf=\"!editing\"\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-pencil\"\n                  (click)=\"initEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pSaveEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-check\"\n                  (click)=\"saveEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pCancelEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  (click)=\"cancelEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-advanced-prime-table', template: "<div class=\"table-container\">\n  <div>\n    <p-table\n      #dt\n      [value]=\"data\"\n      [rows]=\"rows\"\n      [paginator]=\"isPaginated\"\n      [globalFilterFields]=\"globalFilterFields\"\n      [rowsPerPageOptions]=\"rowsPerPage\"\n      dataKey=\"id\"\n      styleClass=\"p-datatable-gridlines\"\n      styleClass=\"p-datatable-striped\"\n      editMode=\"row\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"flex\">\n          <div>\n            <h3>Total: {{ totalRecords }}</h3>\n          </div>\n\n          <div>\n            <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                                : col.thousandSeparator\n                                : col.decimalSeparator\n                          }}\n                        </ng-container>\n                        <ng-template #normalOutput>\n                          {{ data[col.code] }}\n                        </ng-template>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-template>\n                </td>\n\n                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\n                    >\n                      >\n                      {{\n                        data[col.code]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render action buttons if there are any actions defined -->\n          <td *ngIf=\"actions?.length\">\n            <div class=\"action-buttons-container\">\n              <!-- Delete button if deletion is allowed -->\n              <div *ngIf=\"isDelete\">\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"Delete(data.id)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n              <!-- Edit, save, and cancel buttons for row editing -->\n              <div>\n                <button\n                  pInitEditableRow\n                  *ngIf=\"!editing\"\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-pencil\"\n                  (click)=\"initEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pSaveEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-check\"\n                  (click)=\"saveEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pCancelEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  (click)=\"cancelEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}\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            <!-- Clear filters -->\n            <button\n              *ngIf=\"hasSearchFilter\"\n              pButton\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n\n            <!-- Export to Excel Button -->\n            <button\n              *ngIf=\"hasExportExcel\"\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n\n            <!-- Export to PDF Button -->\n            <button\n              *ngIf=\"hasExportPDF\"\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text fa-lg\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          </div>\n          <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n            <!-- Add this wrapper div with ml-auto class -->\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th *ngFor=\"let col of columns\">\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      display=\"menu\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        pTemplate=\"body\"\n        let-data\n        let-editing=\"editing\"\n        let-ri=\"rowIndex\"\n      >\n        <!-- Render a table row and make it editable if `isEdit` is true -->\n        <tr [pEditableRow]=\"isEdit ? data : null\">\n          <!-- Loop through each column and render corresponding table cells -->\n          <ng-container *ngFor=\"let col of columns\">\n            <ng-container *ngIf=\"col.code !== undefined\">\n              <!-- Check if the data for the column exists -->\n              <ng-container *ngIf=\"data[col.code] !== undefined\">\n                <!-- Render an editable cell if the column is editable -->\n                <td *ngIf=\"isEditable(col.code); else normalTD\">\n                  <!-- Multi-select input for columns that are multi-selectable -->\n                  <ng-container\n                    *ngIf=\"isMultiSelect(col.code); else datePicker\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-multiSelect\n                          appendTo=\"body\"\n                          [ngModel]=\"data[col.code]\"\n                          [style]=\"{ width: '100%' }\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [options]=\"optionValues\"\n                        ></p-multiSelect>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <div class=\"multi-select-container\">\n                          <ng-container *ngFor=\"let rec of data[col.code]\">\n                            <p-tag [value]=\"rec\"></p-tag>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <!-- Date picker input for columns that require date selection -->\n                  <ng-template #datePicker>\n                    <ng-container\n                      *ngIf=\"isDatePicker(col.code); else normalInput\"\n                    >\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-calendar\n                            [inputId]=\"data[col.code]\"\n                            [ngModel]=\"data[col.code]\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    </ng-container>\n                  </ng-template>\n\n                  <!-- Normal text input for other columns -->\n                  <ng-template #normalInput>\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[col.code]\"\n                          (change)=\"onChange($event, data.id, col.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <!-- Use currency pipe to format the output for AMOUNT type -->\n                        <ng-container\n                          *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                        >\n                          {{\n                            data[col.code]\n                              | customCurrency\n                                : getCurrencySymbol(col)\n                                : col.decimalPlaces\n                                : col.thousandSeparator\n                                : col.decimalSeparator\n                          }}\n                        </ng-container>\n                        <ng-template #normalOutput>\n                          {{ data[col.code] }}\n                        </ng-template>\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-template>\n                </td>\n\n                <!-- Render a normal table cell if the column is not editable -->\n                <ng-template #normalTD>\n                  <td>\n                    <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                    <ng-container\n                      *ngIf=\"col.type === 'AMOUNT'; else normalText\"\n                    >\n                      >\n                      {{\n                        data[col.code]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalText>\n                      {{ data[col.code] }}\n                    </ng-template>\n                  </td>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render action buttons if there are any actions defined -->\n          <td *ngIf=\"actions?.length\">\n            <div class=\"action-buttons-container\">\n              <!-- Delete button if deletion is allowed -->\n              <div *ngIf=\"isDelete\">\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"Delete(data.id)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n              <!-- Edit, save, and cancel buttons for row editing -->\n              <div>\n                <button\n                  pInitEditableRow\n                  *ngIf=\"!editing\"\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-pencil\"\n                  (click)=\"initEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pSaveEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-check\"\n                  (click)=\"saveEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n                <button\n                  *ngIf=\"editing\"\n                  pCancelEditableRow\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  (click)=\"cancelEditableRow(data)\"\n                  class=\"p-button-rounded p-button-text\"\n                ></button>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}.table-container{display:flex;flex-direction:column;gap:.5rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -384,6 +406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], hasSearchFilter: [{
                 type: Input
+            }], hasExportExcel: [{
+                type: Input
+            }], hasExportPDF: [{
+                type: Input
             }], hasColumnFilter: [{
                 type: Input
             }], isPaginated: [{
@@ -396,6 +422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }], search: [{
                 type: Output
+            }], exportExcelEvent: [{
+                type: Output
+            }], exportPdfEvent: [{
+                type: Output
             }], dt: [{
                 type: ViewChild,
                 args: ['dt', { static: false }]
@@ -475,12 +505,39 @@ var SearchCriteriaTypeEnum;
     SearchCriteriaTypeEnum["MULTISELECT"] = "MULTISELECT";
 })(SearchCriteriaTypeEnum || (SearchCriteriaTypeEnum = {}));
 
-// projects/ng-prime-tools/src/lib/enums/public_api.ts
+var FormInputTypeEnum;
+(function (FormInputTypeEnum) {
+    FormInputTypeEnum["DATE"] = "DATE";
+    FormInputTypeEnum["TEXT"] = "TEXT";
+    FormInputTypeEnum["TEXTAREA"] = "TEXTAREA";
+    FormInputTypeEnum["AMOUNT"] = "AMOUNT";
+    FormInputTypeEnum["NUMBER"] = "NUMBER";
+    FormInputTypeEnum["MULTISELECT"] = "MULTISELECT";
+    FormInputTypeEnum["SELECT"] = "SELECT";
+    FormInputTypeEnum["CURRENCY"] = "CURRENCY";
+    FormInputTypeEnum["CHECKBOX"] = "CHECKBOX";
+    FormInputTypeEnum["SWITCH"] = "SWITCH";
+})(FormInputTypeEnum || (FormInputTypeEnum = {}));
 
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ng-prime-tools/enums" />
+var ButtonColorEnum;
+(function (ButtonColorEnum) {
+    ButtonColorEnum["PRIMARY"] = "p-button-primary";
+    ButtonColorEnum["SECONDARY"] = "p-button-secondary";
+    ButtonColorEnum["SUCCESS"] = "p-button-success";
+    ButtonColorEnum["INFO"] = "p-button-info";
+    ButtonColorEnum["WARNING"] = "p-button-warning";
+    ButtonColorEnum["DANGER"] = "p-button-danger";
+})(ButtonColorEnum || (ButtonColorEnum = {}));
+
+var InputValidationEnum;
+(function (InputValidationEnum) {
+    InputValidationEnum["ONLY_LETTERS"] = "^[A-Za-z ]+$";
+    InputValidationEnum["ONLY_NUMBERS"] = "^[0-9]+$";
+    InputValidationEnum["LETTERS_AND_NUMBERS"] = "^[A-Za-z0-9 ]+$";
+    InputValidationEnum["PHONE_NUMBER"] = "^[0-9 ]+$";
+})(InputValidationEnum || (InputValidationEnum = {}));
+
+// projects/ng-prime-tools/src/lib/enums/public_api.ts
 
 class MultiSearchCriteriaComponent {
     constructor() {
@@ -587,7 +644,7 @@ class MultiSearchCriteriaComponent {
         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", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, 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, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: ["::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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MultiSearchCriteriaComponent, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel 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, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: ["::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: i3$1.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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, decorators: [{
             type: Component,
@@ -652,16 +709,1043 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  */
 /// <amd-module name="ng-prime-tools/multi-search-criteria" />
 
+class PTCheckBoxInputComponent {
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        let control = this.formGroup.get(this.formField.name);
+        if (!control) {
+            control = new FormControl(null);
+            this.formGroup.addControl(this.formField.name, control);
+        }
+        setTimeout(() => {
+            if (this.formField.disabled) {
+                control.disable({ emitEvent: false });
+            }
+            else {
+                control.enable({ emitEvent: false });
+            }
+        });
+        const validators = this.getValidators();
+        control.setValidators(validators);
+        control.updateValueAndValidity({ emitEvent: false });
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(this.requireChoiceValidator());
+        }
+        return validators;
+    }
+    requireChoiceValidator() {
+        return (control) => {
+            return control.value !== null && control.value !== undefined
+                ? null
+                : { requiredChoice: true };
+        };
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.errors?.['requiredChoice'] && !control?.dirty) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <div class=\"checkbox-container\">\n    <p-checkbox\n      [formControlName]=\"formField.name\"\n      [binary]=\"true\"\n      [label]=\"formField.label || ''\"\n    ></p-checkbox>\n  </div>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    \"\n    class=\"error-container\"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.checkbox-container{display:flex;align-items:center}.p-error{font-size:.8rem;color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-check-box-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <div class=\"checkbox-container\">\n    <p-checkbox\n      [formControlName]=\"formField.name\"\n      [binary]=\"true\"\n      [label]=\"formField.label || ''\"\n    ></p-checkbox>\n  </div>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    \"\n    class=\"error-container\"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.checkbox-container{display:flex;align-items:center}.p-error{font-size:.8rem;color:#f44336}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+// date.util.ts
+function getDefaultDateFormat(dateInputType) {
+    switch (dateInputType) {
+        case 'time':
+            return 'HH:mm';
+        case 'datetime':
+            return 'dd/mm/yy';
+        case 'date':
+        default:
+            return 'dd/mm/yy';
+    }
+}
+function getDefaultPlaceholder(dateInputType) {
+    switch (dateInputType) {
+        case 'time':
+            return 'Select time';
+        case 'datetime':
+            return 'Select date and time';
+        case 'date':
+        default:
+            return 'Select date';
+    }
+}
+function parseDate(dateString, format) {
+    const parts = dateString.match(/\d+/g);
+    if (!parts || parts.length < 2)
+        throw new Error(`Invalid date string: ${dateString}`);
+    let day, month, year, hour, minute, second;
+    switch (format) {
+        case 'dd/mm/yy':
+        case 'dd-mm-yy':
+        case 'dd.mm.yy':
+            [day, month, year] = parts;
+            break;
+        case 'mm/dd/yy':
+            [month, day, year] = parts;
+            break;
+        case 'yy/mm/dd':
+            [year, month, day] = parts;
+            break;
+        case 'HH:mm':
+            [hour, minute] = parts;
+            return new Date(0, 0, 0, Number(hour), Number(minute));
+        case 'HH:mm:ss':
+            [hour, minute, second] = parts;
+            return new Date(0, 0, 0, Number(hour), Number(minute), Number(second));
+        default:
+            throw new Error(`Unsupported date format: ${format}`);
+    }
+    year = year.length === 2 ? `20${year}` : year;
+    return new Date(Number(year), Number(month) - 1, Number(day), Number(hour || 0), Number(minute || 0), Number(second || 0));
+}
+function validateTimeValue(value, dateFormat, valueType, hourFormat) {
+    const timeFormat = dateFormat.includes('ss') ? 'HH:mm:ss' : 'HH:mm';
+    const timeParts = value.match(/\d+/g);
+    if (!timeParts || timeParts.length !== (timeFormat === 'HH:mm:ss' ? 3 : 2)) {
+        throw new Error(`Invalid ${valueType} "${value}" for time format "${timeFormat}".`);
+    }
+    const [hour, minute, second] = timeParts.map(Number);
+    const maxHour = hourFormat === '12' ? 12 : 23;
+    if (hour < 0 ||
+        hour > maxHour ||
+        minute < 0 ||
+        minute > 59 ||
+        (second !== undefined && (second < 0 || second > 59))) {
+        throw new Error(`Invalid ${valueType} "${value}". Time must be between 00:00 and ${maxHour}:59.`);
+    }
+}
+
+// pt-date.service.ts
+class PTDateService {
+    constructor() { }
+    // Assign default date format based on input type
+    assignDefaultDateFormat(dateInputType, currentFormat) {
+        return currentFormat || getDefaultDateFormat(dateInputType);
+    }
+    // Validate date format and input type compatibility
+    validateDateFormatAndType(dateFormat, dateInputType, minValue, maxValue, hourFormat = '24') {
+        const dateOnlyFormats = [
+            'dd/mm/yy',
+            'dd-mm-yy',
+            'dd.mm.yy',
+            'mm/dd/yy',
+            'yy/mm/dd',
+        ];
+        const timeOnlyFormats = ['HH:mm', 'HH:mm:ss'];
+        const dateTimeFormats = dateOnlyFormats;
+        switch (dateInputType) {
+            case 'date':
+                if (!dateOnlyFormats.includes(dateFormat)) {
+                    throw new Error(`Invalid dateFormat "${dateFormat}" for dateInputType "date".`);
+                }
+                break;
+            case 'time':
+                if (!timeOnlyFormats.includes(dateFormat)) {
+                    throw new Error(`Invalid dateFormat "${dateFormat}" for dateInputType "time".`);
+                }
+                if (minValue) {
+                    validateTimeValue(minValue, dateFormat, 'minValue', hourFormat);
+                }
+                if (maxValue) {
+                    validateTimeValue(maxValue, dateFormat, 'maxValue', hourFormat);
+                }
+                break;
+            case 'datetime':
+                if (!dateTimeFormats.includes(dateFormat)) {
+                    throw new Error(`Invalid dateFormat "${dateFormat}" for dateInputType "datetime".`);
+                }
+                break;
+            case 'range':
+                if (!dateOnlyFormats.includes(dateFormat)) {
+                    throw new Error(`Invalid dateFormat "${dateFormat}" for dateInputType "range".`);
+                }
+                break;
+            default:
+                throw new Error(`Unsupported dateInputType: ${dateInputType}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class PTDateInputComponent {
+    constructor(dateService) {
+        this.dateService = dateService;
+        this.minDate = null;
+        this.maxDate = null;
+        this.defaultPlaceholder = 'Select date';
+        this.defaultDateFormat = 'dd/mm/yy';
+    }
+    ngOnInit() {
+        this.defaultDateFormat = this.dateService.assignDefaultDateFormat(this.formField.dateInputType || 'date', this.formField.dateFormat);
+        this.setupControl();
+        this.initializeDateLimits();
+        try {
+            this.dateService.validateDateFormatAndType(this.defaultDateFormat, this.formField.dateInputType || 'date', this.formField.minValue, this.formField.maxValue, this.formField.hourFormat || '24');
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                console.error(error.message);
+            }
+            else {
+                console.error('An unknown error occurred.');
+            }
+        }
+        this.defaultPlaceholder = getDefaultPlaceholder(this.formField.dateInputType || 'date');
+    }
+    setupControl() {
+        let control = this.formGroup.get(this.formField.name);
+        if (!control) {
+            control = new FormControl(null);
+            this.formGroup.addControl(this.formField.name, control);
+        }
+        setTimeout(() => {
+            if (this.formField.disabled) {
+                control.disable({ emitEvent: false });
+            }
+            else {
+                control.enable({ emitEvent: false });
+            }
+        });
+        control.setValidators(this.getValidators());
+        control.updateValueAndValidity({ emitEvent: false });
+    }
+    initializeDateLimits() {
+        const dateFormat = this.formField.dateFormat;
+        if (this.formField.minValue) {
+            this.minDate = parseDate(this.formField.minValue, dateFormat);
+        }
+        if (this.formField.maxValue) {
+            this.maxDate = parseDate(this.formField.maxValue, dateFormat);
+        }
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        return validators;
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputComponent, deps: [{ token: PTDateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDateInputComponent, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-calendar\n    [formControlName]=\"formField.name\"\n    [placeholder]=\"formField.placeholder || defaultPlaceholder\"\n    [dateFormat]=\"formField.dateFormat || defaultDateFormat\"\n    [showIcon]=\"true\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [showTime]=\"\n      formField.dateInputType === 'datetime' ||\n      formField.dateInputType === 'time'\n    \"\n    [timeOnly]=\"formField.dateInputType === 'time'\"\n    [hourFormat]=\"formField.hourFormat || '24'\"\n    [selectionMode]=\"formField.dateInputType === 'range' ? 'range' : 'single'\"\n  ></p-calendar>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-date-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-calendar\n    [formControlName]=\"formField.name\"\n    [placeholder]=\"formField.placeholder || defaultPlaceholder\"\n    [dateFormat]=\"formField.dateFormat || defaultDateFormat\"\n    [showIcon]=\"true\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [showTime]=\"\n      formField.dateInputType === 'datetime' ||\n      formField.dateInputType === 'time'\n    \"\n    [timeOnly]=\"formField.dateInputType === 'time'\"\n    [hourFormat]=\"formField.hourFormat || '24'\"\n    [selectionMode]=\"formField.dateInputType === 'range' ? 'range' : 'single'\"\n  ></p-calendar>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: PTDateService }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTNumberInputComponent {
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control) {
+            const validators = this.getValidators();
+            control.setValidators(validators);
+            // Manage the disabled state directly
+            setTimeout(() => {
+                if (this.formField.disabled) {
+                    control.disable({ emitEvent: false });
+                }
+                else {
+                    control.enable({ emitEvent: false });
+                }
+                control.updateValueAndValidity({ emitEvent: false });
+            });
+        }
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        if (this.formField.minValue !== undefined) {
+            const minValue = Number(this.formField.minValue);
+            if (!isNaN(minValue)) {
+                validators.push(Validators.min(minValue));
+            }
+            else {
+                console.error(`Invalid minValue: ${this.formField.minValue} is not a number.`);
+            }
+        }
+        if (this.formField.maxValue !== undefined) {
+            const maxValue = Number(this.formField.maxValue);
+            if (!isNaN(maxValue)) {
+                validators.push(Validators.max(maxValue));
+            }
+            else {
+                console.error(`Invalid maxValue: ${this.formField.maxValue} is not a number.`);
+            }
+        }
+        if (this.formField.inputValidation) {
+            validators.push(this.validateWithInputValidation(this.formField.inputValidation));
+        }
+        return validators;
+    }
+    validateWithInputValidation(inputValidation) {
+        return Validators.pattern(new RegExp(inputValidation));
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        else if (control?.hasError('min')) {
+            return `${this.formField.label} must be at least ${this.formField.minValue}`;
+        }
+        else if (control?.hasError('max')) {
+            return `${this.formField.label} must be at most ${this.formField.maxValue}`;
+        }
+        else if (control?.hasError('pattern')) {
+            return `${this.formField.label} is invalid`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTNumberInputComponent, selector: "pt-number-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-inputGroup>\n    <ng-container\n      *ngIf=\"!formField.iconPosition || formField.iconPosition === 'left'\"\n    >\n      <p-inputGroupAddon *ngIf=\"formField.iconClass || formField.currency\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n        <span *ngIf=\"!formField.iconClass && formField.currency\">\n          {{ formField.currency }}\n        </span>\n      </p-inputGroupAddon>\n      <p-inputNumber\n        [formControlName]=\"formField.name\"\n        mode=\"decimal\"\n        [locale]=\"formField.numberFormat || undefined\"\n        [useGrouping]=\"formField.numberFormat ? true : false\"\n        [minFractionDigits]=\"formField.decimalDigits || 0\"\n        [maxFractionDigits]=\"formField.decimalDigits || 0\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></p-inputNumber>\n    </ng-container>\n    <ng-container *ngIf=\"formField.iconPosition === 'right'\">\n      <p-inputNumber\n        [formControlName]=\"formField.name\"\n        mode=\"decimal\"\n        [locale]=\"formField.numberFormat || undefined\"\n        [useGrouping]=\"formField.numberFormat ? true : false\"\n        [minFractionDigits]=\"formField.decimalDigits || 0\"\n        [maxFractionDigits]=\"formField.decimalDigits || 0\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></p-inputNumber>\n      <p-inputGroupAddon *ngIf=\"formField.iconClass || formField.currency\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n        <span *ngIf=\"!formField.iconClass && formField.currency\">\n          {{ formField.currency }}\n        </span>\n      </p-inputGroupAddon>\n    </ng-container>\n  </p-inputGroup>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.InputGroup, selector: "p-inputGroup", inputs: ["style", "styleClass"] }, { kind: "component", type: i4$1.InputGroupAddon, selector: "p-inputGroupAddon", inputs: ["style", "styleClass"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-number-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-inputGroup>\n    <ng-container\n      *ngIf=\"!formField.iconPosition || formField.iconPosition === 'left'\"\n    >\n      <p-inputGroupAddon *ngIf=\"formField.iconClass || formField.currency\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n        <span *ngIf=\"!formField.iconClass && formField.currency\">\n          {{ formField.currency }}\n        </span>\n      </p-inputGroupAddon>\n      <p-inputNumber\n        [formControlName]=\"formField.name\"\n        mode=\"decimal\"\n        [locale]=\"formField.numberFormat || undefined\"\n        [useGrouping]=\"formField.numberFormat ? true : false\"\n        [minFractionDigits]=\"formField.decimalDigits || 0\"\n        [maxFractionDigits]=\"formField.decimalDigits || 0\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></p-inputNumber>\n    </ng-container>\n    <ng-container *ngIf=\"formField.iconPosition === 'right'\">\n      <p-inputNumber\n        [formControlName]=\"formField.name\"\n        mode=\"decimal\"\n        [locale]=\"formField.numberFormat || undefined\"\n        [useGrouping]=\"formField.numberFormat ? true : false\"\n        [minFractionDigits]=\"formField.decimalDigits || 0\"\n        [maxFractionDigits]=\"formField.decimalDigits || 0\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></p-inputNumber>\n      <p-inputGroupAddon *ngIf=\"formField.iconClass || formField.currency\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n        <span *ngIf=\"!formField.iconClass && formField.currency\">\n          {{ formField.currency }}\n        </span>\n      </p-inputGroupAddon>\n    </ng-container>\n  </p-inputGroup>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTSwitchInputComponent {
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        let control = this.formGroup.get(this.formField.name);
+        if (!control) {
+            // Initialize control with false indicating not activated
+            control = new FormControl(this.formField.required ? null : false);
+            this.formGroup.addControl(this.formField.name, control);
+        }
+        // Apply validators and manage disabled state
+        control.setValidators(this.getValidators());
+        setTimeout(() => {
+            if (this.formField.disabled) {
+                control.disable({ emitEvent: false });
+            }
+            else {
+                control.enable({ emitEvent: false });
+            }
+            control.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(this.requireChoiceValidator());
+        }
+        return validators;
+    }
+    requireChoiceValidator() {
+        return (control) => {
+            return control.value !== null && control.value !== undefined
+                ? null
+                : { requiredChoice: true };
+        };
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.errors?.['requiredChoice'] && !control?.dirty) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <div class=\"switch-container\" style=\"display: flex; align-items: center\">\n    <p-inputSwitch [formControlName]=\"formField.name\"></p-inputSwitch>\n    <label *ngIf=\"formField.label\" style=\"margin-left: 8px\">{{\n      formField.label\n    }}</label>\n  </div>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    \"\n    class=\"error-container\"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".switch-container{display:flex;align-items:center}.error-container{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$4.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-switch-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <div class=\"switch-container\" style=\"display: flex; align-items: center\">\n    <p-inputSwitch [formControlName]=\"formField.name\"></p-inputSwitch>\n    <label *ngIf=\"formField.label\" style=\"margin-left: 8px\">{{\n      formField.label\n    }}</label>\n  </div>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    \"\n    class=\"error-container\"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".switch-container{display:flex;align-items:center}.error-container{margin-top:5px}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTTextAreaInputComponent {
+    constructor() {
+        this.characterCount = 0;
+    }
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control) {
+            const validators = this.getValidators();
+            control.setValidators(validators);
+            // Manage the disabled state here
+            setTimeout(() => {
+                if (this.formField.disabled) {
+                    control.disable();
+                }
+                else {
+                    control.enable();
+                }
+                control.updateValueAndValidity();
+            });
+            // Subscribe to value changes to update character count
+            control.valueChanges.subscribe((value) => {
+                this.characterCount = value ? value.length : 0;
+            });
+        }
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        if (this.formField.minLength !== undefined) {
+            validators.push(Validators.minLength(this.formField.minLength));
+        }
+        if (this.formField.maxLength !== undefined) {
+            validators.push(Validators.maxLength(this.formField.maxLength));
+        }
+        if (this.formField.inputValidation) {
+            validators.push(this.validateWithInputValidation(this.formField.inputValidation));
+        }
+        return validators;
+    }
+    validateWithInputValidation(inputValidation) {
+        return Validators.pattern(new RegExp(inputValidation));
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        else if (control?.hasError('minlength')) {
+            return `${this.formField.label} must be at least ${this.formField.minLength} characters long`;
+        }
+        else if (control?.hasError('maxlength')) {
+            return `${this.formField.label} must be at most ${this.formField.maxLength} characters long`;
+        }
+        else if (control?.hasError('pattern')) {
+            return `${this.formField.label} is invalid`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  *ngIf=\"!formField.hidden\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-inputGroup>\n    <ng-container\n      *ngIf=\"!formField.iconPosition || formField.iconPosition === 'left'\"\n    >\n      <p-inputGroupAddon *ngIf=\"formField.iconClass\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n      </p-inputGroupAddon>\n      <textarea\n        pInputTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [cols]=\"formField.cols || 30\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></textarea>\n    </ng-container>\n    <ng-container *ngIf=\"formField.iconPosition === 'right'\">\n      <textarea\n        pInputTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [cols]=\"formField.cols || 30\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></textarea>\n      <p-inputGroupAddon *ngIf=\"formField.iconClass\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n      </p-inputGroupAddon>\n    </ng-container>\n  </p-inputGroup>\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <!-- Spacer to ensure alignment -->\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:2rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "component", type: i3$3.InputGroup, selector: "p-inputGroup", inputs: ["style", "styleClass"] }, { kind: "component", type: i4$1.InputGroupAddon, selector: "p-inputGroupAddon", inputs: ["style", "styleClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-text-area-input', template: "<div\n  [formGroup]=\"formGroup\"\n  *ngIf=\"!formField.hidden\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-inputGroup>\n    <ng-container\n      *ngIf=\"!formField.iconPosition || formField.iconPosition === 'left'\"\n    >\n      <p-inputGroupAddon *ngIf=\"formField.iconClass\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n      </p-inputGroupAddon>\n      <textarea\n        pInputTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [cols]=\"formField.cols || 30\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></textarea>\n    </ng-container>\n    <ng-container *ngIf=\"formField.iconPosition === 'right'\">\n      <textarea\n        pInputTextarea\n        [formControlName]=\"formField.name\"\n        [rows]=\"formField.rows || 5\"\n        [cols]=\"formField.cols || 30\"\n        [autoResize]=\"formField.autoResize || false\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [placeholder]=\"formField.placeholder || ''\"\n      ></textarea>\n      <p-inputGroupAddon *ngIf=\"formField.iconClass\">\n        <i *ngIf=\"formField.iconClass\" [ngClass]=\"formField.iconClass\"></i>\n      </p-inputGroupAddon>\n    </ng-container>\n  </p-inputGroup>\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <!-- Spacer to ensure alignment -->\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:2rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTTextInputComponent {
+    constructor() {
+        this.characterCount = 0;
+    }
+    ngOnInit() {
+        this.setupControl();
+        this.updateCharacterCount();
+    }
+    setupControl() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control) {
+            const validators = this.getValidators();
+            control.setValidators(validators);
+            setTimeout(() => {
+                if (this.formField.disabled) {
+                    control.disable({ emitEvent: false });
+                }
+                else {
+                    control.enable({ emitEvent: false });
+                    control.valueChanges.subscribe(() => {
+                        this.updateCharacterCount();
+                    });
+                }
+                control.updateValueAndValidity({ emitEvent: false });
+            });
+        }
+    }
+    updateCharacterCount() {
+        const control = this.formGroup.get(this.formField.name);
+        this.characterCount = control.value ? control.value.length : 0;
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        if (this.formField.minLength !== undefined) {
+            validators.push(Validators.minLength(this.formField.minLength));
+        }
+        if (this.formField.maxLength !== undefined) {
+            validators.push(Validators.maxLength(this.formField.maxLength));
+        }
+        if (this.formField.inputValidation) {
+            validators.push(this.validateWithInputValidation(this.formField.inputValidation));
+        }
+        return validators;
+    }
+    validateWithInputValidation(inputValidation) {
+        return Validators.pattern(new RegExp(inputValidation));
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return `${this.formField.label} is required`;
+        }
+        else if (control?.hasError('minlength')) {
+            return `${this.formField.label} must be at least ${this.formField.minLength} characters`;
+        }
+        else if (control?.hasError('maxlength')) {
+            return `${this.formField.label} must be at most ${this.formField.maxLength} characters`;
+        }
+        else if (control?.hasError('pattern')) {
+            return `${this.formField.label} is invalid`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        type=\"text\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n      />\n    </p-iconField>\n  </ng-container>\n  <ng-template #noIcon>\n    <input\n      type=\"text\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{ width: '100%' }\"\n    />\n  </ng-template>\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <!-- Spacer to maintain right alignment -->\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:2rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        type=\"text\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n      />\n    </p-iconField>\n  </ng-container>\n  <ng-template #noIcon>\n    <input\n      type=\"text\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{ width: '100%' }\"\n    />\n  </ng-template>\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <!-- Spacer to maintain right alignment -->\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:2rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTDropdownComponent {
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        let control = this.formGroup.get(this.formField.name);
+        if (!control) {
+            control = new FormControl(this.formField.value || null);
+            this.formGroup.addControl(this.formField.name, control);
+        }
+        const validators = this.getValidators();
+        control.setValidators(validators);
+        // Manage the disabled state using form control
+        setTimeout(() => {
+            if (this.formField.disabled !== undefined) {
+                if (this.formField.disabled) {
+                    control.disable({ emitEvent: false });
+                }
+                else {
+                    control.enable({ emitEvent: false });
+                }
+            }
+            control.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        return validators;
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDropdownComponent, selector: "pt-dropdown", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  ></p-dropdown>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-dropdown', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  ></p-dropdown>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTMultiSelectComponent {
+    ngOnInit() {
+        this.setupControl();
+    }
+    setupControl() {
+        let control = this.formGroup.get(this.formField.name);
+        if (!control) {
+            control = new FormControl(this.formField.value || []);
+            this.formGroup.addControl(this.formField.name, control);
+        }
+        const validators = this.getValidators();
+        control.setValidators(validators);
+        // Manage the disabled state using form control
+        setTimeout(() => {
+            if (this.formField.disabled !== undefined) {
+                if (this.formField.disabled) {
+                    control.disable({ emitEvent: false });
+                }
+                else {
+                    control.enable({ emitEvent: false });
+                }
+            }
+            control.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        return validators;
+    }
+    getErrorMessage() {
+        const control = this.formGroup.get(this.formField.name);
+        if (control?.hasError('required')) {
+            return this.formField.errorText || `${this.formField.label} is required`;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-multiSelect\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select options'\"\n    optionLabel=\"label\"\n  ></p-multiSelect>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-multi-select', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n  <p-multiSelect\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select options'\"\n    optionLabel=\"label\"\n  ></p-multiSelect>\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
+class PTDynamicFormFieldComponent {
+    constructor() {
+        this.FormInputTypeEnum = FormInputTypeEnum;
+    }
+    asTextField(field) {
+        return field;
+    }
+    asNumberField(field) {
+        return field;
+    }
+    asTextAreaField(field) {
+        return field;
+    }
+    asDateField(field) {
+        return field;
+    }
+    asSelectField(field) {
+        return field;
+    }
+    asMultiSelectField(field) {
+        return field;
+    }
+    asCheckboxField(field) {
+        return field;
+    }
+    asSwitchField(field) {
+        return field;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-dynamic-form-field', template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }] } });
+
+class PTFormBuilderComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.mainGroup = { fields: [], groups: [] };
+        this.buttons = [];
+        this.inputWidth = '100%';
+        this.language = 'en';
+        this.formSubmit = new EventEmitter();
+        this.FormInputTypeEnum = FormInputTypeEnum;
+        this.errorMessages = {
+            en: {
+                required: 'is required',
+            },
+            fr: {
+                required: 'est requis',
+            },
+        };
+        this.form = this.fb.group({});
+    }
+    ngOnInit() {
+        this.buildFormGroup(this.mainGroup);
+    }
+    buildFormGroup(group) {
+        group.fields?.forEach((field) => {
+            const validators = field.required ? [Validators.required] : [];
+            this.form.addControl(field.name, this.fb.control(field.value, validators));
+        });
+        group.groups?.forEach((subGroup) => {
+            this.buildFormGroup(subGroup);
+        });
+    }
+    getErrorMessage(field) {
+        if (this.form.get(field.name)?.hasError('required')) {
+            return (field.errorText ||
+                `${field.label} ${this.errorMessages[this.language].required}`);
+        }
+        return '';
+    }
+    onSubmit() {
+        this.form.markAllAsTouched();
+        if (this.form.valid) {
+            this.formSubmit.emit(this.form.value);
+        }
+    }
+    onClear() {
+        this.form.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTFormBuilderComponent, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", language: "language" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div *ngIf=\"title\" [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n  <ng-container *ngFor=\"let field of mainGroup.fields\">\n    <pt-dynamic-form-field\n      [field]=\"field\"\n      [form]=\"form\"\n      [inputWidth]=\"inputWidth\"\n    ></pt-dynamic-form-field>\n  </ng-container>\n\n  <ng-container *ngFor=\"let group of mainGroup.groups\">\n    <div class=\"form-field-group\" [ngStyle]=\"{ width: group.width || '100%' }\">\n      <ng-container *ngFor=\"let field of group.fields\">\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          class=\"flex-item\"\n        ></pt-dynamic-form-field>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"button-group\">\n    <button\n      *ngFor=\"let button of buttons\"\n      type=\"button\"\n      pButton\n      [label]=\"button.text\"\n      [icon]=\"button.icon || ''\"\n      [class]=\"button.color\"\n      (click)=\"\n        button.isSubmit\n          ? onSubmit()\n          : button.isClear\n          ? onClear()\n          : button.action\n          ? button.action()\n          : null\n      \"\n    ></button>\n  </div>\n</form>\n", styles: [".form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-form-builder', template: "<div *ngIf=\"title\" [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n  <ng-container *ngFor=\"let field of mainGroup.fields\">\n    <pt-dynamic-form-field\n      [field]=\"field\"\n      [form]=\"form\"\n      [inputWidth]=\"inputWidth\"\n    ></pt-dynamic-form-field>\n  </ng-container>\n\n  <ng-container *ngFor=\"let group of mainGroup.groups\">\n    <div class=\"form-field-group\" [ngStyle]=\"{ width: group.width || '100%' }\">\n      <ng-container *ngFor=\"let field of group.fields\">\n        <pt-dynamic-form-field\n          [field]=\"field\"\n          [form]=\"form\"\n          class=\"flex-item\"\n        ></pt-dynamic-form-field>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"button-group\">\n    <button\n      *ngFor=\"let button of buttons\"\n      type=\"button\"\n      pButton\n      [label]=\"button.text\"\n      [icon]=\"button.icon || ''\"\n      [class]=\"button.color\"\n      (click)=\"\n        button.isSubmit\n          ? onSubmit()\n          : button.isClear\n          ? onClear()\n          : button.action\n          ? button.action()\n          : null\n      \"\n    ></button>\n  </div>\n</form>\n", styles: [".form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }], propDecorators: { mainGroup: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titleStyle: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class PTCheckBoxInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputModule, declarations: [PTCheckBoxInputComponent], imports: [CommonModule, ReactiveFormsModule, CheckboxModule], exports: [PTCheckBoxInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputModule, imports: [CommonModule, ReactiveFormsModule, CheckboxModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCheckBoxInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTCheckBoxInputComponent],
+                    imports: [CommonModule, ReactiveFormsModule, CheckboxModule],
+                    exports: [PTCheckBoxInputComponent],
+                }]
+        }] });
+
+class PTNumberInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputModule, declarations: [PTNumberInputComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            InputGroupModule,
+            InputGroupAddonModule,
+            InputTextModule,
+            InputNumberModule], exports: [PTNumberInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            InputGroupModule,
+            InputGroupAddonModule,
+            InputTextModule,
+            InputNumberModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNumberInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNumberInputComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        InputTextModule,
+                        InputNumberModule,
+                    ],
+                    exports: [PTNumberInputComponent],
+                }]
+        }] });
+
+class PTSwitchInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputModule, declarations: [PTSwitchInputComponent], imports: [CommonModule, ReactiveFormsModule, InputSwitchModule], exports: [PTSwitchInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputModule, imports: [CommonModule, ReactiveFormsModule, InputSwitchModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSwitchInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTSwitchInputComponent],
+                    imports: [CommonModule, ReactiveFormsModule, InputSwitchModule],
+                    exports: [PTSwitchInputComponent],
+                }]
+        }] });
+
+class PTTextInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputModule, declarations: [PTTextInputComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            InputTextModule,
+            IconFieldModule,
+            InputIconModule], exports: [PTTextInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            InputTextModule,
+            IconFieldModule,
+            InputIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTTextInputComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        InputTextModule,
+                        IconFieldModule,
+                        InputIconModule,
+                    ],
+                    exports: [PTTextInputComponent],
+                }]
+        }] });
+
+class PTTextAreaInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputModule, declarations: [PTTextAreaInputComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            InputTextareaModule,
+            InputGroupModule,
+            InputGroupAddonModule], exports: [PTTextAreaInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            InputTextareaModule,
+            InputGroupModule,
+            InputGroupAddonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextAreaInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTTextAreaInputComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        InputTextareaModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                    ],
+                    exports: [PTTextAreaInputComponent],
+                }]
+        }] });
+
+class PTDateInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputModule, declarations: [PTDateInputComponent], imports: [CommonModule, ReactiveFormsModule, CalendarModule], exports: [PTDateInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputModule, imports: [CommonModule, ReactiveFormsModule, CalendarModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDateInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTDateInputComponent],
+                    imports: [CommonModule, ReactiveFormsModule, CalendarModule],
+                    exports: [PTDateInputComponent],
+                }]
+        }] });
+
+class PTDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownModule, declarations: [PTDropdownComponent], imports: [CommonModule, ReactiveFormsModule, DropdownModule], exports: [PTDropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownModule, imports: [CommonModule, ReactiveFormsModule, DropdownModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTDropdownComponent],
+                    imports: [CommonModule, ReactiveFormsModule, DropdownModule],
+                    exports: [PTDropdownComponent],
+                }]
+        }] });
+
+class PTMultiSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectModule, declarations: [PTMultiSelectComponent], imports: [CommonModule, ReactiveFormsModule, MultiSelectModule], exports: [PTMultiSelectComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectModule, imports: [CommonModule, ReactiveFormsModule, MultiSelectModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMultiSelectComponent],
+                    imports: [CommonModule, ReactiveFormsModule, MultiSelectModule],
+                    exports: [PTMultiSelectComponent],
+                }]
+        }] });
+
+class PTDynamicFormFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldModule, declarations: [PTDynamicFormFieldComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule,
+            PTDropdownModule,
+            PTMultiSelectModule], exports: [PTDynamicFormFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule,
+            PTDropdownModule,
+            PTMultiSelectModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTDynamicFormFieldComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Inputs
+                        PTCheckBoxInputModule,
+                        PTDateInputModule,
+                        PTNumberInputModule,
+                        PTSwitchInputModule,
+                        PTTextAreaInputModule,
+                        PTTextInputModule,
+                        PTDropdownModule,
+                        PTMultiSelectModule,
+                    ],
+                    exports: [PTDynamicFormFieldComponent],
+                }]
+        }] });
+
+class PTFormBuilderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderModule, declarations: [PTFormBuilderComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            ButtonModule,
+            PTDynamicFormFieldModule], exports: [PTFormBuilderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            ButtonModule,
+            PTDynamicFormFieldModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFormBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTFormBuilderComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        PTDynamicFormFieldModule,
+                    ],
+                    exports: [PTFormBuilderComponent],
+                }]
+        }] });
+
 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] }); }
+            MultiSearchCriteriaModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTFormBuilderModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule], exports: [NgAdvancedPrimeTableModule,
+            MultiSearchCriteriaModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTFormBuilderModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
             NgAdvancedPrimeTableModule,
-            MultiSearchCriteriaModule, NgAdvancedPrimeTableModule, MultiSearchCriteriaModule] }); }
+            MultiSearchCriteriaModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTFormBuilderModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule, NgAdvancedPrimeTableModule,
+            MultiSearchCriteriaModule,
+            // Inputs
+            PTCheckBoxInputModule,
+            PTDateInputModule,
+            PTFormBuilderModule,
+            PTNumberInputModule,
+            PTSwitchInputModule,
+            PTTextAreaInputModule,
+            PTTextInputModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, decorators: [{
             type: NgModule,
@@ -671,23 +1755,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         FormsModule,
                         NgAdvancedPrimeTableModule,
                         MultiSearchCriteriaModule,
+                        // Inputs
+                        PTCheckBoxInputModule,
+                        PTDateInputModule,
+                        PTFormBuilderModule,
+                        PTNumberInputModule,
+                        PTSwitchInputModule,
+                        PTTextAreaInputModule,
+                        PTTextInputModule,
+                    ],
+                    exports: [
+                        NgAdvancedPrimeTableModule,
+                        MultiSearchCriteriaModule,
+                        // Inputs
+                        PTCheckBoxInputModule,
+                        PTDateInputModule,
+                        PTFormBuilderModule,
+                        PTNumberInputModule,
+                        PTSwitchInputModule,
+                        PTTextAreaInputModule,
+                        PTTextInputModule,
                     ],
-                    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 { MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, SearchCriteriaTypeEnum, TableTypeEnum };
+export { ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDropdownComponent, PTDropdownModule, PTFormBuilderComponent, PTFormBuilderModule, PTNumberInputComponent, PTNumberInputModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map