ng-prime-tools 1.0.9 → 1.0.11

package/fesm2022/ng-prime-tools.mjs

@@ -3,13 +3,14 @@ import { Pipe, EventEmitter, Component, Input, Output, ViewChild, NgModule, Inje
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
-import { FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, FormControl, Validators, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import * as i2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i3 from 'primeng/api';
+import * as i1$1 from 'primeng/api';
+import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api';
 import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i3$1 from 'primeng/button';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i6 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
@@ -26,20 +27,54 @@ 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 * as i3$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i3$3 from 'primeng/inputgroup';
+import * as i3$2 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 * as i3$3 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i3$5 from 'primeng/inputtextarea';
+import * as i3$4 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i3$6 from 'primeng/dropdown';
+import * as i3$5 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { Chart, registerables } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import * as i2$2 from '@angular/router';
+import { RouterModule, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import * as i3$6 from 'primeng/breadcrumb';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import * as i2$3 from 'primeng/toast';
+import { ToastModule } from 'primeng/toast';
+import * as i3$7 from 'primeng/confirmdialog';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
+
+/**
+ * Calculates the width required for a column based on the header text (column title).
+ * It uses the Canvas API to measure text width dynamically.
+ *
+ * @param {TableColumn} col - The column metadata containing the header title and code.
+ * @param {string} [font='16px Arial'] - The font to use for measurement (defaults to '16px Arial').
+ * @returns {number} - The calculated width of the column in pixels.
+ */
+function calculateTextWidth(col, font = '16px Arial') {
+    // Create a canvas context for measuring text
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+        return 100; // Fallback width if canvas context is not available
+    }
+    // Set the font to match the provided font or the document body font
+    context.font = font || getComputedStyle(document.body).font;
+    // Measure the header text width
+    const headerWidth = context.measureText(col.title).width;
+    // Return the width with some padding
+    return Math.ceil(headerWidth + 20); // Add padding for extra space
+}
 
 class CustomCurrencyPipe {
     transform(value, currency, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
@@ -148,6 +183,7 @@ class NgAdvancedPrimeTableComponent {
         this.exportPdfEvent = new EventEmitter();
         this.searchValue = '';
         this.validCurrencyCodes = ['USD', 'EUR', 'MAD'];
+        this.iconWidth = 77;
         // Component state properties
         this.isDelete = false;
         this.isEdit = false;
@@ -188,8 +224,25 @@ class NgAdvancedPrimeTableComponent {
             if (col.isFilter !== false && col.code !== undefined) {
                 this.globalFilterFields.push(col.code);
             }
+            if (!col.width) {
+                col.width = this.calculateColumnWidth(col);
+            }
         });
     }
+    // Function to calculate column width based on text in header and data
+    calculateColumnWidth(col) {
+        const calculatedWidth = calculateTextWidth(col, col.title);
+        const totalWidth = calculatedWidth + this.iconWidth + 20;
+        return `${totalWidth}px`;
+    }
+    getHeaderWidth(col) {
+        // Remove 'px' from col.width and convert it to a number
+        const widthWithoutPx = parseInt(col.width?.replace('px', '') || '0', 10);
+        // Add 20 to the calculated width
+        const headerWidth = widthWithoutPx + 20;
+        // Return the new width in 'px'
+        return `${headerWidth}px`;
+    }
     // Initialization Methods
     formatingDateFields() {
         return this.data.map((item) => {
@@ -396,11 +449,11 @@ class NgAdvancedPrimeTableComponent {
         this.exportPdfEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <th *ngFor=\"let col of columns\">\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <p-sortIcon field=\"{{ col.code }}\" />\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    display=\"menu\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-container>\n          <ng-template #noSortHeader>\n            <th>\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-template>\n        </th>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td *ngIf=\"isEditable(col.code); else normalTD\">\n                <!-- Multi-select input for columns that are multi-selectable -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <!-- Date picker input for columns that require date selection -->\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <!-- Normal text input for other columns -->\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td>\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\n                    >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <!-- Delete button if deletion is allowed -->\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <!-- Edit, save, and cancel buttons for row editing -->\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse}::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"ng-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <th\n          *ngFor=\"let col of columns\"\n          [style.width]=\"getHeaderWidth(col)\"\n          [style.padding]=\"'0px'\"\n        >\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th\n              pSortableColumn=\"{{ col.code }}\"\n              [style.width]=\"getHeaderWidth(col)\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span>{{ col.title }}</span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      display=\"menu\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </th>\n          </ng-container>\n          <ng-template #noSortHeader>\n            <th>\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-template>\n        </th>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Multi-select input for columns that are multi-selectable -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <!-- Date picker input for columns that require date selection -->\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <!-- Normal text input for other columns -->\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\n                    >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <!-- Delete button if deletion is allowed -->\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <!-- Edit, save, and cancel buttons for row editing -->\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".ng-advanced-prime-table .bread-crumb{margin-bottom:15px}.ng-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.ng-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.ng-advanced-prime-table .settings{display:flex;gap:1rem}.ng-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.ng-advanced-prime-table ::ng-deep p-table{min-width:50rem}.ng-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.ng-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.ng-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.ng-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.ng-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.ng-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.ng-advanced-prime-table .ml-auto{margin-left:auto}.ng-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.ng-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.ng-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.ng-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.ng-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.ng-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.ng-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.ng-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.ng-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.ng-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.ng-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.ng-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.ng-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.ng-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.ng-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.ng-advanced-prime-table th{white-space:normal;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 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  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <th *ngFor=\"let col of columns\">\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th pSortableColumn=\"{{ col.code }}\" style=\"width: 20%\">\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <p-sortIcon field=\"{{ col.code }}\" />\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    display=\"menu\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-container>\n          <ng-template #noSortHeader>\n            <th>\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-template>\n        </th>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td *ngIf=\"isEditable(col.code); else normalTD\">\n                <!-- Multi-select input for columns that are multi-selectable -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <!-- Date picker input for columns that require date selection -->\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <!-- Normal text input for other columns -->\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td>\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\n                    >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <!-- Delete button if deletion is allowed -->\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <!-- Edit, save, and cancel buttons for row editing -->\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.settings{display:flex;gap:1rem}.multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}::ng-deep p-table{min-width:50rem}::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}::ng-deep .header-container{display:flex;align-items:center}::ng-deep .header-container span{margin-right:.5em}::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.flex{display:flex;justify-content:space-between;align-items:center}.ml-auto{margin-left:auto}::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}::ng-deep .p-inputtext{padding-left:1.7rem}::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.table-row{text-align:center;display:flex;gap:1rem;justify-content:center}::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse}::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}\n"] }]
+            args: [{ selector: 'ng-advanced-prime-table', template: "<div class=\"ng-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <th\n          *ngFor=\"let col of columns\"\n          [style.width]=\"getHeaderWidth(col)\"\n          [style.padding]=\"'0px'\"\n        >\n          <ng-container\n            *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n          >\n            <th\n              pSortableColumn=\"{{ col.code }}\"\n              [style.width]=\"getHeaderWidth(col)\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span>{{ col.title }}</span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      display=\"menu\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </th>\n          </ng-container>\n          <ng-template #noSortHeader>\n            <th>\n              <div class=\"header-container\">\n                <span>{{ col.title }}</span>\n                <ng-container *ngIf=\"col.isFilter !== false\">\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                  ></p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-value\n                      let-filterCallback=\"filterCallback\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"filterCallback($event)\"\n                        [display]=\"'chip'\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </th>\n          </ng-template>\n        </th>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column and render corresponding table cells -->\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.code !== undefined\">\n            <!-- Check if the data for the column exists -->\n            <ng-container *ngIf=\"data[col.code] !== undefined\">\n              <!-- Render an editable cell if the column is editable -->\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Multi-select input for columns that are multi-selectable -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <!-- Date picker input for columns that require date selection -->\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <!-- Normal text input for other columns -->\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <!-- Use currency pipe to format the output for AMOUNT type -->\n                      <ng-container\n                        *ngIf=\"col.type === 'AMOUNT'; else normalOutput\"\n                      >\n                        {{\n                          data[col.code]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <!-- Render a normal table cell if the column is not editable -->\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- Use customCurrency pipe to format the output for AMOUNT type with optional decimal places -->\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\n                    >\n                    {{\n                      data[col.code]\n                        | customCurrency\n                          : getCurrencySymbol(col)\n                          : col.decimalPlaces\n                          : col.thousandSeparator\n                          : col.decimalSeparator\n                    }}\n                  </ng-container>\n                  <ng-template #normalText>\n                    {{ data[col.code] }}\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <!-- Delete button if deletion is allowed -->\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <!-- Edit, save, and cancel buttons for row editing -->\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".ng-advanced-prime-table .bread-crumb{margin-bottom:15px}.ng-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.ng-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.ng-advanced-prime-table .settings{display:flex;gap:1rem}.ng-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.ng-advanced-prime-table ::ng-deep p-table{min-width:50rem}.ng-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.ng-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.ng-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.ng-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.ng-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.ng-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.ng-advanced-prime-table .ml-auto{margin-left:auto}.ng-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.ng-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.ng-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.ng-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.ng-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.ng-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.ng-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.ng-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.ng-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.ng-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.ng-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.ng-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.ng-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.ng-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.ng-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.ng-advanced-prime-table th{white-space:normal;word-wrap:break-word}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -522,6 +575,7 @@ var FormInputTypeEnum;
     FormInputTypeEnum["CURRENCY"] = "CURRENCY";
     FormInputTypeEnum["CHECKBOX"] = "CHECKBOX";
     FormInputTypeEnum["SWITCH"] = "SWITCH";
+    FormInputTypeEnum["PASSWORD"] = "PASSWORD";
 })(FormInputTypeEnum || (FormInputTypeEnum = {}));
 
 var ButtonColorEnum;
@@ -542,6 +596,27 @@ var InputValidationEnum;
     InputValidationEnum["PHONE_NUMBER"] = "^[0-9 ]+$";
 })(InputValidationEnum || (InputValidationEnum = {}));
 
+var BadgeType;
+(function (BadgeType) {
+    BadgeType["Info"] = "info";
+    BadgeType["Danger"] = "danger";
+    BadgeType["Warning"] = "warning";
+})(BadgeType || (BadgeType = {}));
+const BadgeTypeStyles = {
+    [BadgeType.Info]: {
+        color: 'white',
+        backgroundColor: '#17a2b8', // Info blue
+    },
+    [BadgeType.Danger]: {
+        color: 'white',
+        backgroundColor: '#dc3545', // Danger red
+    },
+    [BadgeType.Warning]: {
+        color: 'white',
+        backgroundColor: '#ffc107', // Warning yellow
+    },
+};
+
 // projects/ng-prime-tools/src/lib/enums/public_api.ts
 
 class MultiSearchCriteriaComponent {
@@ -649,11 +724,11 @@ 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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MultiSearchCriteriaComponent, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MultiSearchCriteriaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'multi-search-criteria', template: "<p-panel header=\"{{ title }}\" [toggleable]=\"true\" [collapsed]=\"true\">\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, 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"] }]
+            args: [{ selector: 'multi-search-criteria', template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    <div *ngFor=\"let input of criteria\" class=\"criteria-item\">\n      <label class=\"bsc-label\">{{ input.title }}</label>\n\n      <ng-container [ngSwitch]=\"input.type\">\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATERANGE\"\n          [(ngModel)]=\"input.value\"\n          selectionMode=\"range\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          class=\"full-width-input\"\n          [showIcon]=\"true\"\n          (ngModelChange)=\"input.value = $event\"\n        ></p-calendar>\n        <p-calendar\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.DATE\"\n          [ngModel]=\"input.value\"\n          (ngModelChange)=\"input.value = $event\"\n          [dateFormat]=\"'dd/mm/yy'\"\n          [showIcon]=\"true\"\n          class=\"full-width-input\"\n        ></p-calendar>\n        <input\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.STRING\"\n          type=\"text\"\n          pInputText\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        />\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.AMOUNT\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          mode=\"decimal\"\n          inputId=\"minmaxfraction\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"5\"\n          [placeholder]=\"getCurrencySymbol(input)\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-inputNumber\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.NUMBER\"\n          type=\"number\"\n          [(ngModel)]=\"input.value\"\n          class=\"full-width-input\"\n        ></p-inputNumber>\n\n        <p-multiSelect\n          *ngSwitchCase=\"SearchCriteriaTypeEnum.MULTISELECT\"\n          [options]=\"input.filterOptions\"\n          [display]=\"'chip'\"\n          placeholder=\"Select\"\n          [selectAll]=\"selectAll\"\n          [(ngModel)]=\"input.value\"\n          optionLabel=\"label\"\n          (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n          class=\"custom-multiselect full-width-input\"\n        ></p-multiSelect>\n      </ng-container>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], criteria: [{
@@ -751,7 +826,7 @@ class PTCheckBoxInputComponent {
         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"] }] }); }
+    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$1.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,
@@ -1036,7 +1111,7 @@ class PTNumberInputComponent {
         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"] }] }); }
+    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$2.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,
@@ -1092,7 +1167,7 @@ class PTSwitchInputComponent {
         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"] }] }); }
+    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$3.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,
@@ -1167,11 +1242,11 @@ class PTTextAreaInputComponent {
         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"] }] }); }
+    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:1rem}.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$4.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "component", type: i3$2.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"] }]
+            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:1rem}.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: [{
@@ -1207,7 +1282,22 @@ class PTTextInputComponent {
     }
     updateCharacterCount() {
         const control = this.formGroup.get(this.formField.name);
-        this.characterCount = control.value ? control.value.length : 0;
+        if (control && control.value !== null) {
+            this.characterCount = control.value ? control.value.length : 0;
+        }
+        else {
+            this.characterCount = 0;
+        }
+    }
+    getInputType() {
+        switch (this.formField.type) {
+            case FormInputTypeEnum.PASSWORD:
+                return 'password';
+            case FormInputTypeEnum.NUMBER:
+                return 'number';
+            default:
+                return 'text';
+        }
     }
     getValidators() {
         const validators = [];
@@ -1245,11 +1335,11 @@ class PTTextInputComponent {
         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"] }] }); }
+    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]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\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]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\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    <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:1rem}.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}input:focus{outline:none;box-shadow:none;border-color:inherit}\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"] }]
+            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\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]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\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    <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:1rem}.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}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -1296,7 +1386,7 @@ class PTDropdownComponent {
         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"] }] }); }
+    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$5.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,
@@ -1448,7 +1538,7 @@ class PTFormBuilderComponent {
         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"] }] }); }
+    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.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,
@@ -1964,6 +2054,7 @@ class PTMenuComponent {
     constructor() {
         this.config = {
             icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
+            menuDirection: 'right',
         };
         this.isOpen = false;
     }
@@ -1972,13 +2063,28 @@ class PTMenuComponent {
     static { this.DEFAULT_ICON_COLOR = '#000'; }
     static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
     static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
+    static { this.openMenuInstance = null; }
     toggleMenu() {
+        if (PTMenuComponent.openMenuInstance &&
+            PTMenuComponent.openMenuInstance !== this) {
+            PTMenuComponent.openMenuInstance.closeMenu();
+        }
         this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            PTMenuComponent.openMenuInstance = this;
+        }
+        else {
+            PTMenuComponent.openMenuInstance = null;
+        }
     }
     closeMenu() {
         this.isOpen = false;
+        if (PTMenuComponent.openMenuInstance === this) {
+            PTMenuComponent.openMenuInstance = null;
+        }
     }
     getMenuItemIconClass(item) {
+        // Assuming that icons starting with "fa" are FontAwesome icons
         return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
     }
     getMenuItemIconStyles(item) {
@@ -2012,19 +2118,18 @@ class PTMenuComponent {
             fontSize: item.fontSize || PTMenuComponent.DEFAULT_TEXT_FONT_SIZE,
         };
     }
-    // Listen to all clicks on the document
     onDocumentClick(event) {
-        const clickedInside = event.target.closest('.menu-container');
+        const clickedInside = event.target.closest('.pt-menu');
         if (!clickedInside) {
             this.closeMenu();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMenuComponent, selector: "pt-menu", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"menu-container\" [ngClass]=\"{ open: isOpen }\">\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".menu-container{position:relative;display:inline-block}.menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.menu-item i{margin-right:10px}.menu-item:hover{background-color:#f1f1f1}.menu-container.open .menu-dropdown{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMenuComponent, selector: "pt-menu", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu\"\n>\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".pt-menu{position:relative;display:inline-block}.pt-menu .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu .menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.pt-menu .menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.pt-menu .menu-item i{margin-right:10px}.pt-menu .menu-item:hover{background-color:#f1f1f1}.pt-menu.open .menu-dropdown{display:block}.pt-menu.menu-left .menu-dropdown{right:0;left:auto}.pt-menu.menu-right .menu-dropdown{left:0;right:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-menu', template: "<div class=\"menu-container\" [ngClass]=\"{ open: isOpen }\">\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".menu-container{position:relative;display:inline-block}.menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.menu-item i{margin-right:10px}.menu-item:hover{background-color:#f1f1f1}.menu-container.open .menu-dropdown{display:block}\n"] }]
+            args: [{ selector: 'pt-menu', template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu\"\n>\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <div\n      class=\"menu-item\"\n      *ngFor=\"let item of config.menuItems\"\n      (click)=\"item.action()\"\n    >\n      <i\n        [ngClass]=\"getMenuItemIconClass(item)\"\n        [ngStyle]=\"getMenuItemIconStyles(item)\"\n      ></i>\n      <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".pt-menu{position:relative;display:inline-block}.pt-menu .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu .menu-dropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden}.pt-menu .menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.pt-menu .menu-item i{margin-right:10px}.pt-menu .menu-item:hover{background-color:#f1f1f1}.pt-menu.open .menu-dropdown{display:block}.pt-menu.menu-left .menu-dropdown{right:0;left:auto}.pt-menu.menu-right .menu-dropdown{left:0;right:auto}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], onDocumentClick: [{
@@ -2036,6 +2141,7 @@ class PTCardComponent {
     constructor() {
         this.config = {};
     }
+    // Default values as readonly variables
     static { this.DEFAULT_TITLE_COLOR = '#333'; }
     static { this.DEFAULT_TITLE_FONT_SIZE = '1.5em'; }
     static { this.DEFAULT_ICON_COLOR = '#333'; }
@@ -2048,9 +2154,15 @@ class PTCardComponent {
     static { this.DEFAULT_MENU_POSITION = 'right'; }
     static { this.DEFAULT_BORDER_COLOR = '#ddd'; }
     static { this.DEFAULT_BORDER_WIDTH = '1px'; }
+    static { this.DEFAULT_TRANSPARENCY = '100'; }
+    static { this.DEFAULT_PADDING = '16px'; }
+    static { this.DEFAULT_MARGIN = '16px 0'; }
     isTitleObject() {
         return typeof this.config.title === 'object';
     }
+    hasTitle() {
+        return this.config.title !== undefined && this.config.title !== null;
+    }
     getTitleText() {
         return this.isTitleObject()
             ? this.config.title.text
@@ -2097,21 +2209,41 @@ class PTCardComponent {
         return this.config.menuPosition || PTCardComponent.DEFAULT_MENU_POSITION;
     }
     getCardStyles() {
+        const transparency = this.config.pattern?.transparencyPercentage ||
+            PTCardComponent.DEFAULT_TRANSPARENCY;
+        const backgroundImage = this.config.pattern
+            ? `linear-gradient(rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100}), rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100})), url(${this.config.pattern.imageUrl})`
+            : '';
+        // Apply border conditionally based on noBorder property
+        const borderStyle = this.config.noBorder
+            ? 'none'
+            : `solid ${this.config.borderWidth || PTCardComponent.DEFAULT_BORDER_WIDTH} ${this.config.borderColor || PTCardComponent.DEFAULT_BORDER_COLOR}`;
         return {
             backgroundColor: this.config.backgroundColor || PTCardComponent.DEFAULT_BACKGROUND_COLOR,
+            backgroundImage: backgroundImage,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
             width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
             height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
-            borderColor: this.config.borderColor || PTCardComponent.DEFAULT_BORDER_COLOR,
-            borderWidth: this.config.borderWidth || PTCardComponent.DEFAULT_BORDER_WIDTH,
-            borderStyle: 'solid',
+            border: borderStyle,
+            padding: this.config.padding || PTCardComponent.DEFAULT_PADDING,
+            margin: this.config.margin || PTCardComponent.DEFAULT_MARGIN,
+            borderRadius: this.config.borderRadius || '8px',
+            boxShadow: this.config.boxShadow || '0 2px 4px rgba(0, 0, 0, 0.1)',
         };
     }
+    isScrollableHorizontal() {
+        return !!this.config.scrollableHorizontal;
+    }
+    isScrollableVertical() {
+        return !!this.config.scrollableVertical;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"card\" [ngStyle]=\"getCardStyles()\">\n  <div class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card{border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin:16px 0;display:flex;flex-direction:column}.card-body{flex-grow:1}.card-header-icon-left{margin-right:6px}.card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.card-header-icon-right{margin-left:6px}.menu-left{position:absolute;left:0;top:0}.menu-right{position:absolute;right:0;top:-2px}.card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"pt-card card\" [ngStyle]=\"getCardStyles()\">\n  <div *ngIf=\"hasTitle()\" class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div\n    class=\"card-body\"\n    [ngClass]=\"{\n      'card-body-scrollable-vertical': isScrollableVertical(),\n      'card-body-scrollable-horizontal': isScrollableHorizontal()\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{padding:16px;margin:16px 0;display:flex;flex-direction:column;max-height:100vh;overflow:hidden;background-size:cover;background-position:center}.pt-card .card-body{flex-grow:1;max-width:100%}.pt-card .card-body-scrollable-horizontal{overflow-x:auto;padding-bottom:8px}.pt-card .card-body-scrollable-vertical{flex-grow:1;overflow-y:auto;padding-right:8px}.pt-card .card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-card', template: "<div class=\"card\" [ngStyle]=\"getCardStyles()\">\n  <div class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card{border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:16px;margin:16px 0;display:flex;flex-direction:column}.card-body{flex-grow:1}.card-header-icon-left{margin-right:6px}.card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.card-header-icon-right{margin-left:6px}.menu-left{position:absolute;left:0;top:0}.menu-right{position:absolute;right:0;top:-2px}.card-menu{margin-left:auto;cursor:pointer}\n"] }]
+            args: [{ selector: 'pt-card', template: "<div class=\"pt-card card\" [ngStyle]=\"getCardStyles()\">\n  <div *ngIf=\"hasTitle()\" class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-left\"\n    ></i>\n    <span>{{ getTitleText() }}</span>\n    <i\n      *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n      [ngClass]=\"getIconClass()\"\n      [ngStyle]=\"getIconStyles()\"\n      class=\"card-header-icon-right\"\n    ></i>\n    <pt-menu\n      *ngIf=\"config.menu\"\n      [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n    ></pt-menu>\n  </div>\n  <div\n    class=\"card-body\"\n    [ngClass]=\"{\n      'card-body-scrollable-vertical': isScrollableVertical(),\n      'card-body-scrollable-horizontal': isScrollableHorizontal()\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{padding:16px;margin:16px 0;display:flex;flex-direction:column;max-height:100vh;overflow:hidden;background-size:cover;background-position:center}.pt-card .card-body{flex-grow:1;max-width:100%}.pt-card .card-body-scrollable-horizontal{overflow-x:auto;padding-bottom:8px}.pt-card .card-body-scrollable-vertical{flex-grow:1;overflow-y:auto;padding-right:8px}.pt-card .card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2144,6 +2276,1046 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+class PTMenuFancyComponent {
+    constructor() {
+        this.config = {
+            icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
+            menuDirection: 'right',
+        };
+        this.cardMenuConfig = { noBorder: true };
+        this.isOpen = false;
+    }
+    static { this.DEFAULT_TEXT_COLOR = '#000'; }
+    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_COLOR = '#000'; }
+    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
+    static { this.openMenuInstance = null; }
+    toggleMenu() {
+        if (PTMenuFancyComponent.openMenuInstance &&
+            PTMenuFancyComponent.openMenuInstance !== this) {
+            PTMenuFancyComponent.openMenuInstance.closeMenu();
+        }
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            PTMenuFancyComponent.openMenuInstance = this;
+        }
+        else {
+            PTMenuFancyComponent.openMenuInstance = null;
+        }
+    }
+    closeMenu() {
+        this.isOpen = false;
+        if (PTMenuFancyComponent.openMenuInstance === this) {
+            PTMenuFancyComponent.openMenuInstance = null;
+        }
+    }
+    getMenuItemIconClass(item) {
+        // Assuming that icons starting with "fa" are FontAwesome icons
+        return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
+    }
+    getMenuItemIconStyles(item) {
+        if (typeof item.icon !== 'string') {
+            return {
+                color: item.icon?.color || PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+                fontSize: item.icon?.fontSize || PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+            };
+        }
+        return {
+            color: PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+            fontSize: PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getIconClass() {
+        return this.config.icon?.code || PTMenuFancyComponent.DEFAULT_ICON_CODE;
+    }
+    getIconStyles() {
+        return {
+            color: this.config.color ||
+                this.config.icon?.color ||
+                PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+            fontSize: this.config.fontSize ||
+                this.config.icon?.fontSize ||
+                PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getTextStyles(item) {
+        return {
+            color: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
+            fontSize: item.fontSize || PTMenuFancyComponent.DEFAULT_TEXT_FONT_SIZE,
+        };
+    }
+    onDocumentClick(event) {
+        const clickedInside = event.target.closest('.pt-menu-fancy');
+        if (!clickedInside) {
+            this.closeMenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n>\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <pt-card [config]=\"cardMenuConfig\">\n      <div\n        class=\"menu-item\"\n        *ngFor=\"let item of config.menuItems\"\n        (click)=\"item.action()\"\n      >\n        <i\n          [ngClass]=\"getMenuItemIconClass(item)\"\n          [ngStyle]=\"getMenuItemIconStyles(item)\"\n        ></i>\n        <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n      </div>\n    </pt-card>\n  </div>\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:100%;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden;opacity:0;transform:translateY(-20px);transition:transform .3s ease-out,opacity .3s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0)}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.pt-menu-fancy .menu-item i{margin-right:10px}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-menu-fancy', template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n>\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n  <div class=\"menu-dropdown\" *ngIf=\"isOpen\">\n    <pt-card [config]=\"cardMenuConfig\">\n      <div\n        class=\"menu-item\"\n        *ngFor=\"let item of config.menuItems\"\n        (click)=\"item.action()\"\n      >\n        <i\n          [ngClass]=\"getMenuItemIconClass(item)\"\n          [ngStyle]=\"getMenuItemIconStyles(item)\"\n        ></i>\n        <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n      </div>\n    </pt-card>\n  </div>\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:100%;background-color:#fff;box-shadow:0 8px 16px #0003;min-width:160px;z-index:1;border-radius:5px;overflow:hidden;opacity:0;transform:translateY(-20px);transition:transform .3s ease-out,opacity .3s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0)}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center}.pt-menu-fancy .menu-item i{margin-right:10px}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PTNavbarMenuComponent {
+    constructor() {
+        this.navBarMenuConfig = {};
+        this.toggleSidebar = new EventEmitter();
+    }
+    // Default values as readonly variables
+    static { this.DEFAULT_LOGO_URL = ''; }
+    static { this.DEFAULT_LOGO_ALT_TEXT = 'Logo'; }
+    static { this.DEFAULT_LOGO_WIDTH = '40px'; }
+    static { this.DEFAULT_LOGO_HEIGHT = 'auto'; }
+    static { this.DEFAULT_APP_NAME = 'Application'; }
+    static { this.DEFAULT_APP_NAME_COLOR = '#000'; }
+    static { this.DEFAULT_APP_NAME_FONT_SIZE = '24px'; }
+    static { this.DEFAULT_TRANSPARENCY = '100'; }
+    static { this.DEFAULT_ICON_COLOR = '#333'; }
+    isImageStyle(object) {
+        return typeof object === 'object' && 'imageUrl' in object;
+    }
+    isTextStyle(object) {
+        return typeof object === 'object' && 'text' in object;
+    }
+    getLogoUrl() {
+        return this.isImageStyle(this.navBarMenuConfig.logo)
+            ? this.navBarMenuConfig.logo.imageUrl
+            : PTNavbarMenuComponent.DEFAULT_LOGO_URL;
+    }
+    getLogoAltText() {
+        return this.isImageStyle(this.navBarMenuConfig.logo)
+            ? this.navBarMenuConfig.logo.altText ||
+                PTNavbarMenuComponent.DEFAULT_LOGO_ALT_TEXT
+            : PTNavbarMenuComponent.DEFAULT_LOGO_ALT_TEXT;
+    }
+    getLogoStyles() {
+        if (this.isImageStyle(this.navBarMenuConfig.logo)) {
+            return {
+                color: this.navBarMenuConfig.logo.color ||
+                    PTNavbarMenuComponent.DEFAULT_ICON_COLOR,
+                width: this.navBarMenuConfig.logo.width ||
+                    PTNavbarMenuComponent.DEFAULT_LOGO_WIDTH,
+                height: this.navBarMenuConfig.logo.height ||
+                    PTNavbarMenuComponent.DEFAULT_LOGO_HEIGHT,
+            };
+        }
+        return {};
+    }
+    getAppName() {
+        return this.isTextStyle(this.navBarMenuConfig.appName)
+            ? this.navBarMenuConfig.appName.text
+            : PTNavbarMenuComponent.DEFAULT_APP_NAME;
+    }
+    getAppNameStyles() {
+        if (this.isTextStyle(this.navBarMenuConfig.appName)) {
+            return {
+                color: this.navBarMenuConfig.appName.color ||
+                    PTNavbarMenuComponent.DEFAULT_APP_NAME_COLOR,
+                fontSize: this.navBarMenuConfig.appName.fontSize ||
+                    PTNavbarMenuComponent.DEFAULT_APP_NAME_FONT_SIZE,
+            };
+        }
+        return {
+            color: PTNavbarMenuComponent.DEFAULT_APP_NAME_COLOR,
+            fontSize: PTNavbarMenuComponent.DEFAULT_APP_NAME_FONT_SIZE,
+        };
+    }
+    getNavbarStyles() {
+        const transparency = this.navBarMenuConfig.pattern?.transparencyPercentage ||
+            PTNavbarMenuComponent.DEFAULT_TRANSPARENCY;
+        const backgroundImage = this.navBarMenuConfig.pattern
+            ? `linear-gradient(rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100}), rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100})), url(${this.navBarMenuConfig.pattern.imageUrl})`
+            : '';
+        return {
+            backgroundColor: this.navBarMenuConfig.pattern ? 'transparent' : '#fff',
+            backgroundImage: backgroundImage,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        };
+    }
+    toggleMenu() {
+        this.toggleSidebar.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i class=\"pi pi-bars\"></i>\n    </a>\n  </div>\n  <div class=\"navbar-right\">\n    <pt-menu-fancy\n      *ngFor=\"let menuConfig of navBarMenuConfig.menus\"\n      [config]=\"menuConfig\"\n    ></pt-menu-fancy>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000;cursor:pointer}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-nav-bar-menu', template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i class=\"pi pi-bars\"></i>\n    </a>\n  </div>\n  <div class=\"navbar-right\">\n    <pt-menu-fancy\n      *ngFor=\"let menuConfig of navBarMenuConfig.menus\"\n      [config]=\"menuConfig\"\n    ></pt-menu-fancy>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000;cursor:pointer}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px}\n"] }]
+        }], propDecorators: { navBarMenuConfig: [{
+                type: Input
+            }], toggleSidebar: [{
+                type: Output
+            }] } });
+
+class PTMenuFancyModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyModule, declarations: [PTMenuFancyComponent], imports: [CommonModule, PTCardModule], exports: [PTMenuFancyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyModule, imports: [CommonModule, PTCardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMenuFancyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTMenuFancyComponent],
+                    imports: [CommonModule, PTCardModule],
+                    exports: [PTMenuFancyComponent],
+                }]
+        }] });
+
+class PTNavbarMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuModule, declarations: [PTNavbarMenuComponent], imports: [CommonModule, RouterModule, PTMenuFancyModule], exports: [PTNavbarMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuModule, imports: [CommonModule, RouterModule, PTMenuFancyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTNavbarMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNavbarMenuComponent],
+                    imports: [CommonModule, RouterModule, PTMenuFancyModule],
+                    exports: [PTNavbarMenuComponent],
+                }]
+        }] });
+
+class PTSideBarMenuComponent {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+        this.menuConfig = {
+            menus: [],
+            isVisible: true,
+            searchable: true,
+            width: '250px',
+            height: '100vh',
+            scrollable: true,
+            backgroundColor: 'white',
+            fontColor: '#333', // Default main font color
+            fontColorSubMenu: '#666', // Default submenu font color
+            hoverColor: '#f1f1f1', // Default hover color for main menu
+            hoverColorSubMenu: '#e0e0e0', // Default hover color for submenu
+        };
+        this.searchCardConfig = {
+            backgroundColor: 'white',
+            height: '72px',
+        };
+        this.cardConfig = {
+            backgroundColor: '',
+            width: '',
+            height: '',
+            scrollableVertical: false,
+        };
+        this.formGroup = new FormGroup({
+            search: new FormControl(''),
+        });
+        this.searchField = {
+            name: 'search',
+            placeholder: 'Search...',
+            iconClass: 'pi pi-search',
+        };
+        this.filteredMenus = [];
+    }
+    ngOnInit() {
+        this.cardConfig = {
+            backgroundColor: this.menuConfig.backgroundColor,
+            width: this.menuConfig.width,
+            height: this.menuConfig.height,
+            scrollableVertical: this.menuConfig.scrollable,
+            pattern: this.menuConfig.pattern,
+        };
+        this.filteredMenus = this.menuConfig.menus;
+        const cardWidth = this.menuConfig.width
+            ? parseInt(this.menuConfig.width)
+            : 250;
+        this.searchField.width = `${cardWidth - 60}px`;
+        this.searchCardConfig.width = this.menuConfig.width;
+        this.searchCardConfig.pattern = this.menuConfig.pattern;
+        if (this.menuConfig.searchable) {
+            this.formGroup
+                .get('search')
+                ?.valueChanges.subscribe((searchTerm) => {
+                this.onSearch(searchTerm);
+            });
+        }
+    }
+    toggleMenu(item, event) {
+        item.isExpanded = !item.isExpanded;
+        event.preventDefault();
+    }
+    getChevronClass(item) {
+        return item.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right';
+    }
+    getBadgeStyles(badge) {
+        const defaultColors = this.getDefaultBadgeColors(badge.type || BadgeType.Info);
+        return {
+            color: badge.color || defaultColors.color,
+            backgroundColor: badge.backgroundColor || defaultColors.backgroundColor,
+            padding: '2px 8px',
+            borderRadius: '5px',
+            fontSize: '12px',
+        };
+    }
+    getDefaultBadgeColors(type) {
+        switch (type) {
+            case BadgeType.Info:
+                return { color: 'white', backgroundColor: '#17a2b8' };
+            case BadgeType.Danger:
+                return { color: 'white', backgroundColor: '#dc3545' };
+            case BadgeType.Warning:
+                return { color: 'white', backgroundColor: '#ffc107' };
+            default:
+                return { color: 'white', backgroundColor: '#6c757d' };
+        }
+    }
+    onSearch(searchTerm) {
+        if (searchTerm.trim() === '') {
+            this.filteredMenus = this.menuConfig.menus;
+            this.collapseAllMenus();
+        }
+        else {
+            const lowerCaseSearch = searchTerm.toLowerCase();
+            this.filteredMenus = this.menuConfig.menus
+                .map((menu) => this.searchInMenu({ ...menu }, lowerCaseSearch))
+                .filter(Boolean);
+        }
+    }
+    searchInMenu(menu, searchTerm) {
+        const isMatch = menu.label.toLowerCase().includes(searchTerm);
+        if (menu.children) {
+            const matchingChildren = menu.children
+                .map((child) => this.searchInMenu(child, searchTerm))
+                .filter(Boolean);
+            if (matchingChildren.length > 0) {
+                menu.children = matchingChildren;
+                menu.isExpanded = true;
+                return menu;
+            }
+        }
+        return isMatch ? menu : null;
+    }
+    collapseAllMenus() {
+        this.menuConfig.menus.forEach((menu) => {
+            menu.isExpanded = false;
+        });
+    }
+    getMenuItemStyles() {
+        return {
+            color: this.menuConfig.fontColor || '#333', // Set default font color if not specified in config
+        };
+    }
+    getMenuLinkStyles() {
+        return {
+            color: this.menuConfig.fontColor || '#333',
+            'text-decoration': 'none',
+            'border-radius': '8px',
+            padding: '10px 15px',
+            'font-size': '16px',
+            transition: 'background-color 0.2s, color 0.2s',
+            display: 'flex',
+            'align-items': 'center',
+            ':hover': {
+                backgroundColor: this.menuConfig.hoverColor || '#f1f1f1',
+                color: '#111',
+            },
+        };
+    }
+    getSubMenuLinkStyles() {
+        return {
+            color: this.menuConfig.fontColorSubMenu || this.menuConfig.fontColor || '#666',
+            'text-decoration': 'none',
+            'border-radius': '5px',
+            padding: '5px 10px',
+            transition: 'background-color 0.2s, color 0.2s',
+            ':hover': {
+                backgroundColor: this.menuConfig.hoverColorSubMenu || '#e0e0e0',
+            },
+        };
+    }
+    ngAfterViewInit() {
+        this.applyHoverEffects();
+    }
+    applyHoverEffects() {
+        const menuLinks = this.el.nativeElement.querySelectorAll('a.menu-link');
+        const subMenuLinks = this.el.nativeElement.querySelectorAll('a.submenu-link');
+        // Apply hover effects for main menu links
+        menuLinks.forEach((link) => {
+            this.renderer.listen(link, 'mouseenter', () => {
+                this.renderer.setStyle(link, 'background-color', this.menuConfig.hoverColor || '#f1f1f1');
+                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColor || 'white');
+            });
+            this.renderer.listen(link, 'mouseleave', () => {
+                this.renderer.removeStyle(link, 'background-color');
+                this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || '#333');
+            });
+        });
+        // Apply hover effects for submenu links
+        subMenuLinks.forEach((link) => {
+            this.renderer.listen(link, 'mouseenter', () => {
+                this.renderer.setStyle(link, 'background-color', this.menuConfig.hoverColorSubMenu ||
+                    this.menuConfig.hoverColor ||
+                    '#f1f1f1');
+                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColorSubMenu ||
+                    this.menuConfig.hoverFontColor ||
+                    '#fff');
+            });
+            this.renderer.listen(link, 'mouseleave', () => {
+                this.renderer.removeStyle(link, 'background-color');
+                this.renderer.setStyle(link, 'color', this.menuConfig.fontColorSubMenu ||
+                    this.menuConfig.fontColor ||
+                    '#666');
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .search-input{margin-left:10px}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-side-bar-menu', template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .search-input{margin-left:10px}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
+                type: Input
+            }] } });
+
+class PTSideBarMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuModule, declarations: [PTSideBarMenuComponent], imports: [CommonModule, RouterModule, PTCardModule, PTTextInputModule], exports: [PTSideBarMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuModule, imports: [CommonModule, RouterModule, PTCardModule, PTTextInputModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTSideBarMenuComponent],
+                    imports: [CommonModule, RouterModule, PTCardModule, PTTextInputModule],
+                    exports: [PTSideBarMenuComponent],
+                }]
+        }] });
+
+class PTFooterComponent {
+    constructor() {
+        this.footerConfig = {
+            appName: 'Default App',
+            version: '1.0.0',
+            productionYear: new Date().getFullYear(),
+        };
+    }
+    getCurrentYear() {
+        return new Date().getFullYear();
+    }
+    getCardConfig() {
+        return (this.footerConfig.cardConfig ?? {
+            backgroundColor: '#f8f8f8',
+            width: '100%',
+            height: 'auto',
+            scrollableVertical: false,
+            padding: '0',
+            margin: '0',
+        });
+    }
+    displayYears() {
+        const currentYear = this.getCurrentYear();
+        const productionYear = this.footerConfig.productionYear;
+        return productionYear === currentYear
+            ? `${currentYear}`
+            : `${productionYear} - ${currentYear}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTFooterComponent, selector: "pt-footer", inputs: { footerConfig: "footerConfig" }, ngImport: i0, template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:5px;font-size:14px;line-height:1.8;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-footer', template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:5px;font-size:14px;line-height:1.8;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"] }]
+        }], propDecorators: { footerConfig: [{
+                type: Input
+            }] } });
+
+class PTBreadCrumbService {
+    constructor(router) {
+        this.router = router;
+        this._breadcrumb = new BehaviorSubject([]);
+        this.breadcrumb$ = this._breadcrumb.asObservable();
+        this.menuData = [];
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            let urlParts = event.urlAfterRedirects.split('/');
+            urlParts.splice(0, 1);
+            let urlWithoutContext = urlParts.join('/');
+            let newBreadcrumb = this.createBreadcrumb(urlWithoutContext);
+            this._breadcrumb.next(newBreadcrumb);
+        });
+    }
+    // Method to set menuData
+    setMenuData(menuData) {
+        this.menuData = menuData;
+    }
+    createBreadcrumb(url = '', breadcrumbs = []) {
+        if (!url) {
+            return breadcrumbs;
+        }
+        const pathSegments = url.split('/').filter((segment) => segment);
+        return this.buildParentBreadcrumbs(this.menuData, pathSegments, breadcrumbs);
+    }
+    buildParentBreadcrumbs(menuData, pathSegments, breadcrumbs) {
+        if (pathSegments.length === 0) {
+            return breadcrumbs;
+        }
+        const currentSegment = pathSegments.shift();
+        const currentMenu = menuData.find((menu) => menu.url === currentSegment || menu.url.endsWith(currentSegment));
+        if (currentMenu) {
+            breadcrumbs.push({ label: currentMenu.label, url: currentMenu.url });
+            if (currentMenu.children &&
+                currentMenu.children.length > 0 &&
+                pathSegments.length > 0) {
+                return this.buildChildBreadcrumbs(currentMenu.children, pathSegments, breadcrumbs, currentSegment || '');
+            }
+        }
+        return breadcrumbs;
+    }
+    buildChildBreadcrumbs(menuData, pathSegments, breadcrumbs, currentUrl) {
+        if (pathSegments.length === 0) {
+            return breadcrumbs;
+        }
+        const currentSegment = pathSegments.shift();
+        currentUrl = `/${currentUrl}/${currentSegment}`;
+        const currentMenu = menuData.find((menu) => menu.url === currentUrl);
+        if (currentMenu) {
+            breadcrumbs.push({ label: currentMenu.label, url: currentMenu.url });
+            if (currentMenu.children &&
+                currentMenu.children.length > 0 &&
+                pathSegments.length > 0) {
+                return this.buildChildBreadcrumbs(currentMenu.children, pathSegments, breadcrumbs, currentUrl);
+            }
+        }
+        else {
+            const parentMenu = menuData.find((menu) => menu.children &&
+                menu.children.some((child) => child.url === currentUrl));
+            if (parentMenu && parentMenu.children) {
+                const childMenu = parentMenu.children.find((child) => child.url === currentUrl);
+                if (childMenu) {
+                    breadcrumbs.push({ label: parentMenu.label, url: parentMenu.url });
+                    breadcrumbs.push({ label: childMenu.label, url: childMenu.url });
+                    if (childMenu.children &&
+                        childMenu.children.length > 0 &&
+                        pathSegments.length > 0) {
+                        return this.buildChildBreadcrumbs(childMenu.children, pathSegments, breadcrumbs, currentUrl);
+                    }
+                }
+            }
+        }
+        return breadcrumbs;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, deps: [{ token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2$2.Router }] });
+
+class PTBreadCrumbComponent {
+    constructor(breadcrumbService, renderer, el) {
+        this.breadcrumbService = breadcrumbService;
+        this.renderer = renderer;
+        this.el = el;
+    }
+    ngOnInit() {
+        this.home = { icon: 'pi pi-home', routerLink: 'dashboard' };
+        // Pass the input menuData to the service
+        this.breadcrumbService.setMenuData(this.breadCrumbConfig.menuData);
+        this.breadCrumbSubscription = this.breadcrumbService.breadcrumb$.subscribe((breadcrumb) => {
+            this.items = breadcrumb;
+        });
+    }
+    ngAfterViewInit() {
+        this.applyBackgroundStyles();
+    }
+    ngOnDestroy() {
+        if (this.breadCrumbSubscription) {
+            this.breadCrumbSubscription.unsubscribe();
+        }
+    }
+    applyBackgroundStyles() {
+        const transparency = this.breadCrumbConfig.pattern?.transparencyPercentage || '100';
+        const backgroundImage = this.breadCrumbConfig.pattern?.imageUrl
+            ? `linear-gradient(rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100}), rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100})), url('${this.breadCrumbConfig.pattern.imageUrl}')`
+            : '';
+        // Delay to ensure that the element is fully rendered before applying styles
+        setTimeout(() => {
+            const breadcrumbNav = this.el.nativeElement.querySelector('nav.p-breadcrumb.p-component');
+            if (breadcrumbNav) {
+                this.renderer.setStyle(breadcrumbNav, 'background-image', backgroundImage);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbComponent, deps: [{ token: PTBreadCrumbService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: { breadCrumbConfig: "breadCrumbConfig" }, ngImport: i0, template: "<div\n  *ngIf=\"items && items.length > 0\"\n  class=\"pt-bread-crumb breadcrumb-container\"\n>\n  <p-breadcrumb class=\"max-w-full\" [model]=\"items\" [home]=\"home\"></p-breadcrumb>\n</div>\n", styles: [".pt-bread-crumb ::ng-deep chevronrighticon.p-element.p-icon-wrapper.ng-star-inserted{margin-top:4px}.pt-bread-crumb ::ng-deep .p-breadcrumb{margin-bottom:20px}.pt-bread-crumb .breadcrumb-container{padding:10px;border-radius:5px;margin-bottom:20px}.pt-bread-crumb ::ng-deep .breadcrumb-background{background-size:cover;background-position:center;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$6.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-bread-crumb', template: "<div\n  *ngIf=\"items && items.length > 0\"\n  class=\"pt-bread-crumb breadcrumb-container\"\n>\n  <p-breadcrumb class=\"max-w-full\" [model]=\"items\" [home]=\"home\"></p-breadcrumb>\n</div>\n", styles: [".pt-bread-crumb ::ng-deep chevronrighticon.p-element.p-icon-wrapper.ng-star-inserted{margin-top:4px}.pt-bread-crumb ::ng-deep .p-breadcrumb{margin-bottom:20px}.pt-bread-crumb .breadcrumb-container{padding:10px;border-radius:5px;margin-bottom:20px}.pt-bread-crumb ::ng-deep .breadcrumb-background{background-size:cover;background-position:center;background-repeat:no-repeat}\n"] }]
+        }], ctorParameters: () => [{ type: PTBreadCrumbService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { breadCrumbConfig: [{
+                type: Input
+            }] } });
+
+class PTPageSkeletonComponent {
+    constructor() {
+        this.toggleSidebar = new EventEmitter();
+        this.isSidebarVisible = true;
+    }
+    ngOnInit() {
+        this.initializeBackgroundCardConfig();
+        this.initializeContentCardConfig();
+    }
+    onToggleSidebar() {
+        this.isSidebarVisible = !this.isSidebarVisible;
+        this.toggleSidebar.emit();
+    }
+    // Initialize backgroundCardConfig with default values
+    initializeBackgroundCardConfig() {
+        this.pageSkeletonConfig.backgroundCardConfig = {
+            noBorder: this.pageSkeletonConfig.backgroundCardConfig?.noBorder ?? true,
+            backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor || '#fff',
+            padding: this.pageSkeletonConfig.backgroundCardConfig?.padding || '20px',
+            margin: this.pageSkeletonConfig.backgroundCardConfig?.margin || '10px',
+            ...this.pageSkeletonConfig.backgroundCardConfig,
+        };
+    }
+    // Initialize contentCardConfig with default values (if necessary)
+    initializeContentCardConfig() {
+        this.pageSkeletonConfig.contentCardConfig = {
+            noBorder: this.pageSkeletonConfig.contentCardConfig?.noBorder ?? false,
+            backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor || '#f0f0f0',
+            padding: this.pageSkeletonConfig.contentCardConfig?.padding || '15px',
+            ...this.pageSkeletonConfig.contentCardConfig,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTPageSkeletonComponent, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    <pt-side-bar-menu\n      *ngIf=\"isSidebarVisible\"\n      [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n      class=\"sidebar\"\n    ></pt-side-bar-menu>\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        <pt-bread-crumb\n          *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <pt-footer\n    *ngIf=\"pageSkeletonConfig.footerConfig\"\n    [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n    class=\"pt-footer\"\n  ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-page-skeleton', template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    <pt-side-bar-menu\n      *ngIf=\"isSidebarVisible\"\n      [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n      class=\"sidebar\"\n    ></pt-side-bar-menu>\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        <pt-bread-crumb\n          *ngIf=\"pageSkeletonConfig.breadCrumbConfig\"\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <pt-footer\n    *ngIf=\"pageSkeletonConfig.footerConfig\"\n    [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n    class=\"pt-footer\"\n  ></pt-footer>\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"] }]
+        }], propDecorators: { pageSkeletonConfig: [{
+                type: Input
+            }], toggleSidebar: [{
+                type: Output
+            }] } });
+
+class PTFooterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTFooterModule, declarations: [PTFooterComponent], imports: [CommonModule, PTCardModule], exports: [PTFooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFooterModule, imports: [CommonModule, PTCardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTFooterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTFooterComponent],
+                    imports: [CommonModule, PTCardModule],
+                    exports: [PTFooterComponent],
+                }]
+        }] });
+
+class PTBreadCrumbModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbModule, declarations: [PTBreadCrumbComponent], imports: [CommonModule, BreadcrumbModule], exports: [PTBreadCrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbModule, imports: [CommonModule, BreadcrumbModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTBreadCrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTBreadCrumbComponent],
+                    imports: [CommonModule, BreadcrumbModule],
+                    exports: [PTBreadCrumbComponent],
+                }]
+        }] });
+
+class PTPageSkeletonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonModule, declarations: [PTPageSkeletonComponent], imports: [CommonModule,
+            PTNavbarMenuModule,
+            PTCardModule,
+            PTSideBarMenuModule,
+            RouterModule,
+            PTFooterModule,
+            PTBreadCrumbModule], exports: [PTPageSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonModule, imports: [CommonModule,
+            PTNavbarMenuModule,
+            PTCardModule,
+            PTSideBarMenuModule,
+            RouterModule,
+            PTFooterModule,
+            PTBreadCrumbModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTPageSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTPageSkeletonComponent],
+                    imports: [
+                        CommonModule,
+                        PTNavbarMenuModule,
+                        PTCardModule,
+                        PTSideBarMenuModule,
+                        RouterModule,
+                        PTFooterModule,
+                        PTBreadCrumbModule,
+                    ],
+                    exports: [PTPageSkeletonComponent],
+                }]
+        }] });
+
+class PTButtonComponent {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+        this.buttonConfig = {
+            label: 'Click Me',
+            icon: '',
+            iconPos: 'left',
+            disabled: false,
+            styleClass: '',
+            loading: false,
+            type: 'button',
+            width: '100%',
+            height: 'auto',
+            fontColor: '#000',
+            backgroundColor: '#fff',
+            borderColor: '#000',
+        };
+    }
+    ngOnInit() {
+        // Initialization logic if needed
+    }
+    ngAfterViewInit() {
+        this.applyButtonStyles();
+    }
+    getIconPos() {
+        return this.buttonConfig.iconPos === 'right' ? 'right' : 'left';
+    }
+    getType() {
+        return this.buttonConfig.type || 'button';
+    }
+    applyButtonStyles() {
+        // Select the native button element inside the p-button
+        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
+        if (buttonElement) {
+            // Apply dynamic styles using Renderer2
+            this.renderer.setStyle(buttonElement, 'color', this.buttonConfig.fontColor);
+            this.renderer.setStyle(buttonElement, 'background-color', this.buttonConfig.backgroundColor);
+            this.renderer.setStyle(buttonElement, 'border-color', this.buttonConfig.borderColor);
+            this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
+            this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass\"\n  [type]=\"getType()\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-button', template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass\"\n  [type]=\"getType()\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
+                type: Input
+            }] } });
+
+class PTLoginPageComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.loginSubmit = new EventEmitter();
+        this.backgroundImageStyle = '';
+        this.formGroup = this.fb.group({});
+    }
+    ngOnInit() {
+        this.initializeDefaults();
+        this.setupFormFields();
+        this.formGroup.patchValue({
+            username: this.loginPageConfig.login?.username || '',
+            password: this.loginPageConfig.login?.password || '',
+        });
+        this.setBackgroundImageStyle();
+        // Enable/Disable the button based on form validity
+        this.formGroup.statusChanges.subscribe((status) => {
+            this.loginPageConfig.buttonConfig.disabled = status !== 'VALID';
+        });
+    }
+    // Initialize default values for all fields in loginPageConfig if not set
+    initializeDefaults() {
+        // Initialize backgroundImage
+        this.loginPageConfig.backgroundImage = {
+            imageUrl: this.loginPageConfig.backgroundImage?.imageUrl || '',
+            transparencyPercentage: this.loginPageConfig.backgroundImage?.transparencyPercentage || '100',
+            ...this.loginPageConfig.backgroundImage,
+        };
+        // Initialize title
+        this.loginPageConfig.title = {
+            text: this.loginPageConfig.title?.text || 'Login',
+            position: this.loginPageConfig.title?.position || 'center',
+            color: this.loginPageConfig.title?.color || '#333',
+            fontSize: this.loginPageConfig.title?.fontSize || '24px',
+            ...this.loginPageConfig.title,
+        };
+        // Initialize logoUrl
+        this.loginPageConfig.logoUrl = {
+            altText: this.loginPageConfig.logoUrl?.altText || 'Logo',
+            imageUrl: this.loginPageConfig.logoUrl?.imageUrl || '',
+            width: this.loginPageConfig.logoUrl?.width || '100px',
+            height: this.loginPageConfig.logoUrl?.height || 'auto',
+            ...this.loginPageConfig.logoUrl,
+        };
+        // Initialize footer
+        this.loginPageConfig.footer = {
+            version: this.loginPageConfig.footer?.version || 'V1.0',
+            copyright: this.loginPageConfig.footer?.copyright || 'Your Company © 2024',
+            ...this.loginPageConfig.footer,
+        };
+        // Initialize login
+        this.loginPageConfig.login = {
+            username: this.loginPageConfig.login?.username || '',
+            password: this.loginPageConfig.login?.password || '',
+            errorMessage: this.loginPageConfig.login?.errorMessage || '',
+            emptyFieldsErrorMessage: this.loginPageConfig.login?.emptyFieldsErrorMessage ||
+                "Veuillez saisir votre nom d'utilisateur et votre mot de passe !",
+            ...this.loginPageConfig.login,
+        };
+        // Initialize cardConfig
+        this.loginPageConfig.cardConfig = {
+            noBorder: this.loginPageConfig.cardConfig?.noBorder ?? true,
+            width: this.loginPageConfig.cardConfig?.width ?? '400px',
+            padding: this.loginPageConfig.cardConfig?.padding ?? '40px',
+            ...this.loginPageConfig.cardConfig,
+        };
+        // Initialize usernameField
+        this.loginPageConfig.usernameField = {
+            name: this.loginPageConfig.usernameField?.name || 'username',
+            label: this.loginPageConfig.usernameField?.label || "Nom d'utilisateur",
+            required: this.loginPageConfig.usernameField?.required ?? true,
+            placeholder: this.loginPageConfig.usernameField?.placeholder ||
+                "Entrer votre nom d'utilisateur",
+            ...this.loginPageConfig.usernameField,
+        };
+        // Initialize passwordField
+        this.loginPageConfig.passwordField = {
+            name: this.loginPageConfig.passwordField?.name || 'password',
+            label: this.loginPageConfig.passwordField?.label || 'Mot de passe',
+            required: this.loginPageConfig.passwordField?.required ?? true,
+            placeholder: this.loginPageConfig.passwordField?.placeholder ||
+                'Entrer votre mot de passe',
+            type: this.loginPageConfig.passwordField?.type || FormInputTypeEnum.PASSWORD,
+            ...this.loginPageConfig.passwordField,
+        };
+        // Initialize buttonConfig
+        this.loginPageConfig.buttonConfig = {
+            label: this.loginPageConfig.buttonConfig?.label || 'Login',
+            type: this.loginPageConfig.buttonConfig?.type || 'submit',
+            icon: this.loginPageConfig.buttonConfig?.icon || 'pi pi-sign-in',
+            iconPos: this.loginPageConfig.buttonConfig?.iconPos || 'left',
+            styleClass: this.loginPageConfig.buttonConfig?.styleClass || 'p-button-success',
+            disabled: this.loginPageConfig.buttonConfig?.disabled ?? true,
+            width: this.loginPageConfig.buttonConfig?.width ?? '100%',
+            ...this.loginPageConfig.buttonConfig,
+        };
+    }
+    setBackgroundImageStyle() {
+        const transparency = parseFloat(this.loginPageConfig?.backgroundImage?.transparencyPercentage) / 100;
+        this.backgroundImageStyle = `linear-gradient(rgba(255,255,255,${1 - transparency}), rgba(255,255,255,${1 - transparency})), url(${this.loginPageConfig?.backgroundImage?.imageUrl})`;
+    }
+    login() {
+        if (this.formGroup.valid) {
+            this.loginSubmit.emit(this.formGroup.value);
+        }
+        else {
+            this.loginPageConfig.login.errorMessage =
+                this.loginPageConfig.login?.emptyFieldsErrorMessage;
+        }
+    }
+    // Setup form fields using the usernameField and passwordField from LoginPageConfig
+    setupFormFields() {
+        const usernameValidators = this.loginPageConfig.usernameField?.required
+            ? [Validators.required]
+            : [];
+        const passwordValidators = this.loginPageConfig.passwordField?.required
+            ? [Validators.required]
+            : [];
+        this.formGroup.addControl(this.loginPageConfig.usernameField.name, this.fb.control(this.loginPageConfig.login?.username, usernameValidators));
+        this.formGroup.addControl(this.loginPageConfig.passwordField.name, this.fb.control(this.loginPageConfig.login?.password, passwordValidators));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTLoginPageComponent, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<div\n  class=\"login-container\"\n  [ngStyle]=\"{\n    'background-image': backgroundImageStyle\n  }\"\n>\n  <pt-card [config]=\"loginPageConfig.cardConfig!\">\n    <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText\"\n        [style.width]=\"loginPageConfig.logoUrl?.width\"\n        [style.height]=\"loginPageConfig.logoUrl?.height\"\n      />\n    </div>\n\n    <div\n      class=\"title-container\"\n      [ngStyle]=\"{ 'text-align': loginPageConfig.title?.position }\"\n    >\n      <h1\n        [ngStyle]=\"{\n          color: loginPageConfig.title?.color,\n          'font-size': loginPageConfig.title?.fontSize\n        }\"\n      >\n        {{ loginPageConfig.title?.text }}\n      </h1>\n    </div>\n\n    <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"login()\">\n      <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"loginPageConfig.usernameField!\"\n        ></pt-text-input>\n      </div>\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"loginPageConfig.passwordField!\"\n        ></pt-text-input>\n      </div>\n      <div class=\"submit-btn\">\n        <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n      </div>\n    </form>\n\n    <div class=\"login-footer\">\n      {{ loginPageConfig.footer?.version }}\n      <span>{{ loginPageConfig.footer?.copyright }}</span>\n    </div>\n  </pt-card>\n</div>\n", styles: [".login-container{background-size:cover;background-position:center;background-repeat:no-repeat;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%}.logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}@media (max-width: 768px){.submit-btn{min-width:100%}}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}\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.ɵ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: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-login-page', template: "<div\n  class=\"login-container\"\n  [ngStyle]=\"{\n    'background-image': backgroundImageStyle\n  }\"\n>\n  <pt-card [config]=\"loginPageConfig.cardConfig!\">\n    <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText\"\n        [style.width]=\"loginPageConfig.logoUrl?.width\"\n        [style.height]=\"loginPageConfig.logoUrl?.height\"\n      />\n    </div>\n\n    <div\n      class=\"title-container\"\n      [ngStyle]=\"{ 'text-align': loginPageConfig.title?.position }\"\n    >\n      <h1\n        [ngStyle]=\"{\n          color: loginPageConfig.title?.color,\n          'font-size': loginPageConfig.title?.fontSize\n        }\"\n      >\n        {{ loginPageConfig.title?.text }}\n      </h1>\n    </div>\n\n    <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"login()\">\n      <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"loginPageConfig.usernameField!\"\n        ></pt-text-input>\n      </div>\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"loginPageConfig.passwordField!\"\n        ></pt-text-input>\n      </div>\n      <div class=\"submit-btn\">\n        <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n      </div>\n    </form>\n\n    <div class=\"login-footer\">\n      {{ loginPageConfig.footer?.version }}\n      <span>{{ loginPageConfig.footer?.copyright }}</span>\n    </div>\n  </pt-card>\n</div>\n", styles: [".login-container{background-size:cover;background-position:center;background-repeat:no-repeat;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%}.logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}@media (max-width: 768px){.submit-btn{min-width:100%}}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }], propDecorators: { loginPageConfig: [{
+                type: Input
+            }], loginSubmit: [{
+                type: Output
+            }] } });
+
+class PTButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, declarations: [PTButtonComponent], imports: [CommonModule, ButtonModule], exports: [PTButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, imports: [CommonModule, ButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTButtonComponent],
+                    imports: [CommonModule, ButtonModule],
+                    exports: [PTButtonComponent],
+                }]
+        }] });
+
+class PTLoginPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, declarations: [PTLoginPageComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            PTTextInputModule,
+            PTCardModule,
+            PTButtonModule], exports: [PTLoginPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            PTTextInputModule,
+            PTCardModule,
+            PTButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTLoginPageComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PTTextInputModule,
+                        PTCardModule,
+                        PTButtonModule,
+                    ],
+                    exports: [PTLoginPageComponent],
+                }]
+        }] });
+
+class PTDialogComponent {
+    constructor(confirmationService, messageService, renderer, el) {
+        this.confirmationService = confirmationService;
+        this.messageService = messageService;
+        this.renderer = renderer;
+        this.el = el;
+        this.dialogModel = {
+            header: { text: 'Confirmation' },
+            visible: false,
+            width: '400px',
+            height: 'auto',
+            content: 'Do you want to proceed?',
+            confirmButtonConfig: {
+                label: 'Confirm',
+                fontColor: '#fff',
+                backgroundColor: '#007bff',
+            },
+            cancelButtonConfig: {
+                label: 'Cancel',
+                fontColor: '#fff',
+                backgroundColor: '#6c757d',
+            },
+        };
+        this.confirm = new EventEmitter();
+        this.cancel = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['dialogModel'] && this.dialogModel.visible) {
+            this.showDialog();
+        }
+    }
+    showDialog() {
+        this.confirmationService.confirm({
+            header: this.dialogModel.header?.text || 'Confirmation',
+            message: this.dialogModel.content || 'Are you sure?',
+            acceptButtonStyleClass: this.getButtonStyle(this.dialogModel.confirmButtonConfig),
+            rejectButtonStyleClass: this.getButtonStyle(this.dialogModel.cancelButtonConfig),
+            acceptIcon: this.dialogModel.confirmButtonConfig?.icon || 'pi pi-check',
+            rejectIcon: this.dialogModel.cancelButtonConfig?.icon || 'pi pi-times',
+            accept: () => {
+                this.confirm.emit();
+                this.messageService.add({
+                    severity: 'info',
+                    summary: 'Confirmed',
+                    detail: 'Action confirmed',
+                    life: 3000,
+                });
+            },
+            reject: (type) => {
+                this.cancel.emit();
+                if (type === ConfirmEventType.REJECT) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Rejected',
+                        detail: 'Action cancelled',
+                        life: 3000,
+                    });
+                }
+            },
+        });
+        // Use renderer to apply dynamic styles
+        setTimeout(() => {
+            const dialogElement = this.el.nativeElement.querySelector('.p-dialog');
+            if (dialogElement) {
+                this.renderer.setStyle(dialogElement, 'width', this.dialogModel.width || '400px');
+                this.renderer.setStyle(dialogElement, 'height', this.dialogModel.height || 'auto');
+            }
+        }, 0);
+    }
+    getButtonStyle(buttonConfig) {
+        return buttonConfig?.styleClass || 'p-button-sm'; // Default to small button style
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [{ token: i1$1.ConfirmationService }, { token: i1$1.MessageService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { dialogModel: "dialogModel" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div>\n  <p-toast></p-toast>\n  <p-confirmDialog>\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\"\n      >\n        <i [class]=\"dialogModel.header?.icon || 'pi pi-exclamation-circle'\"></i>\n        <p>{{ message.message }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i3$7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-dialog', providers: [ConfirmationService, MessageService], template: "<div>\n  <p-toast></p-toast>\n  <p-confirmDialog>\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border\"\n      >\n        <i [class]=\"dialogModel.header?.icon || 'pi pi-exclamation-circle'\"></i>\n        <p>{{ message.message }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.ConfirmationService }, { type: i1$1.MessageService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dialogModel: [{
+                type: Input
+            }], confirm: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class PTDialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, declarations: [PTDialogComponent], imports: [CommonModule,
+            DialogModule,
+            PTButtonModule,
+            ToastModule,
+            ConfirmDialogModule], exports: [PTDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, imports: [CommonModule,
+            DialogModule,
+            PTButtonModule,
+            ToastModule,
+            ConfirmDialogModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTDialogComponent],
+                    imports: [
+                        CommonModule,
+                        DialogModule,
+                        PTButtonModule,
+                        ToastModule,
+                        ConfirmDialogModule,
+                    ],
+                    exports: [PTDialogComponent],
+                }]
+        }] });
+
 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,
@@ -2166,7 +3338,24 @@ class NgPrimeToolsModule {
             // Cards
             PTCardModule,
             // Menu
-            PTMenuModule], exports: [NgAdvancedPrimeTableModule,
+            PTMenuModule,
+            PTMenuFancyModule,
+            // Navbar
+            PTNavbarMenuModule,
+            // SideBar
+            PTSideBarMenuModule,
+            // Page skeleton
+            PTPageSkeletonModule,
+            // Footer
+            PTFooterModule,
+            // BreadCrumb
+            PTBreadCrumbModule,
+            // Login
+            PTLoginPageModule,
+            // Button
+            PTButtonModule,
+            // Dialog
+            PTDialogModule], exports: [NgAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -2184,7 +3373,24 @@ class NgPrimeToolsModule {
             // Cards
             PTCardModule,
             // Menu
-            PTMenuModule] }); }
+            PTMenuModule,
+            PTMenuFancyModule,
+            // Navbar
+            PTNavbarMenuModule,
+            // SideBar
+            PTSideBarMenuModule,
+            // Page skeleton
+            PTPageSkeletonModule,
+            // Footer
+            PTFooterModule,
+            // BreadCrumb
+            PTBreadCrumbModule,
+            // Login
+            PTLoginPageModule,
+            // Button
+            PTButtonModule,
+            // Dialog
+            PTDialogModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
             NgAdvancedPrimeTableModule,
@@ -2205,7 +3411,24 @@ class NgPrimeToolsModule {
             // Cards
             PTCardModule,
             // Menu
-            PTMenuModule, NgAdvancedPrimeTableModule,
+            PTMenuModule,
+            PTMenuFancyModule,
+            // Navbar
+            PTNavbarMenuModule,
+            // SideBar
+            PTSideBarMenuModule,
+            // Page skeleton
+            PTPageSkeletonModule,
+            // Footer
+            PTFooterModule,
+            // BreadCrumb
+            PTBreadCrumbModule,
+            // Login
+            PTLoginPageModule,
+            // Button
+            PTButtonModule,
+            // Dialog
+            PTDialogModule, NgAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -2223,7 +3446,24 @@ class NgPrimeToolsModule {
             // Cards
             PTCardModule,
             // Menu
-            PTMenuModule] }); }
+            PTMenuModule,
+            PTMenuFancyModule,
+            // Navbar
+            PTNavbarMenuModule,
+            // SideBar
+            PTSideBarMenuModule,
+            // Page skeleton
+            PTPageSkeletonModule,
+            // Footer
+            PTFooterModule,
+            // BreadCrumb
+            PTBreadCrumbModule,
+            // Login
+            PTLoginPageModule,
+            // Button
+            PTButtonModule,
+            // Dialog
+            PTDialogModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, decorators: [{
             type: NgModule,
@@ -2250,6 +3490,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTCardModule,
                         // Menu
                         PTMenuModule,
+                        PTMenuFancyModule,
+                        // Navbar
+                        PTNavbarMenuModule,
+                        // SideBar
+                        PTSideBarMenuModule,
+                        // Page skeleton
+                        PTPageSkeletonModule,
+                        // Footer
+                        PTFooterModule,
+                        // BreadCrumb
+                        PTBreadCrumbModule,
+                        // Login
+                        PTLoginPageModule,
+                        // Button
+                        PTButtonModule,
+                        // Dialog
+                        PTDialogModule,
                     ],
                     exports: [
                         NgAdvancedPrimeTableModule,
@@ -2271,6 +3528,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTCardModule,
                         // Menu
                         PTMenuModule,
+                        PTMenuFancyModule,
+                        // Navbar
+                        PTNavbarMenuModule,
+                        // SideBar
+                        PTSideBarMenuModule,
+                        // Page skeleton
+                        PTPageSkeletonModule,
+                        // Footer
+                        PTFooterModule,
+                        // BreadCrumb
+                        PTBreadCrumbModule,
+                        // Login
+                        PTLoginPageModule,
+                        // Button
+                        PTButtonModule,
+                        // Dialog
+                        PTDialogModule,
                     ],
                 }]
         }] });
@@ -2281,5 +3555,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDropdownComponent, PTDropdownModule, PTFormBuilderComponent, PTFormBuilderModule, PTMenuComponent, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNumberInputComponent, PTNumberInputModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
+export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgAdvancedPrimeTableComponent, NgAdvancedPrimeTableModule, NgPrimeToolsModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map