ng-prime-tools 1.0.15 → 1.0.17

package/fesm2022/ng-prime-tools.mjs

@@ -160,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-class NgAdvancedPrimeTableComponent {
+class PTAdvancedPrimeTableComponent {
     constructor() {
         // Inputs
         this.data = [];
@@ -199,8 +199,10 @@ class NgAdvancedPrimeTableComponent {
         this.initEditableRow = () => { };
         this.saveEditableRow = () => { };
         this.cancelEditableRow = () => { };
+        this.hasGroupedColumns = false;
     }
     ngOnInit() {
+        this.hasGroupedColumns = this.columns.some((col) => col.children && col.children.length > 0);
         // Transform the date fields based on column metadata
         this.data = this.formatingDateFields();
         this.globalFilterFields = this.columns
@@ -448,12 +450,12 @@ class NgAdvancedPrimeTableComponent {
     exportPdf() {
         this.exportPdfEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NgAdvancedPrimeTableComponent, selector: "ng-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\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\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'pt-advanced-prime-table', template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n  >\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        *ngIf=\"col.type === 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [currency]=\"getCurrencySymbol(col)\"\n                      ></p-columnFilter>\n\n                      <p-columnFilter\n                        *ngIf=\"col.type !== 'AMOUNT'\"\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [type]=\"getColumnFilterType(col)\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'date'\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [display]=\"'chip'\"\n                            placeholder=\"Select\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [display]=\"'chip'\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code]\"\n                          [ngModel]=\"data[col.code]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <ng-container *ngIf=\"col.type === 'AMOUNT'; else normalText\">\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\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-trash\"\n                (click)=\"Delete(data.id)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n            <div>\n              <button\n                pInitEditableRow\n                *ngIf=\"!editing\"\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-pencil\"\n                (click)=\"initEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pSaveEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-check\"\n                (click)=\"saveEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n              <button\n                *ngIf=\"editing\"\n                pCancelEditableRow\n                pButton\n                pRipple\n                type=\"button\"\n                icon=\"pi pi-times\"\n                (click)=\"cancelEditableRow(data)\"\n                class=\"p-button-rounded p-button-text\"\n              ></button>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -493,9 +495,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['dt', { static: false }]
             }] } });
 
-class NgAdvancedPrimeTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, declarations: [NgAdvancedPrimeTableComponent, CustomDatePipe], imports: [CommonModule,
+class PTAdvancedPrimeTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableModule, declarations: [PTAdvancedPrimeTableComponent, CustomDatePipe], imports: [CommonModule,
             TableModule,
             InputTextModule,
             ButtonModule,
@@ -506,8 +508,8 @@ class NgAdvancedPrimeTableModule {
             CustomCurrencyPipe,
             IconFieldModule,
             InputIconModule,
-            ProgressSpinnerModule], exports: [NgAdvancedPrimeTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, imports: [CommonModule,
+            ProgressSpinnerModule], exports: [PTAdvancedPrimeTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableModule, imports: [CommonModule,
             TableModule,
             InputTextModule,
             ButtonModule,
@@ -519,10 +521,10 @@ class NgAdvancedPrimeTableModule {
             InputIconModule,
             ProgressSpinnerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgAdvancedPrimeTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NgAdvancedPrimeTableComponent, CustomDatePipe],
+                    declarations: [PTAdvancedPrimeTableComponent, CustomDatePipe],
                     imports: [
                         CommonModule,
                         TableModule,
@@ -537,7 +539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         InputIconModule,
                         ProgressSpinnerModule,
                     ],
-                    exports: [NgAdvancedPrimeTableComponent],
+                    exports: [PTAdvancedPrimeTableComponent],
                 }]
         }] });
 
@@ -2276,7 +2278,13 @@ class PTCardComponent {
             : `${patternWidth} ${patternHeight}`;
         // Determine background-position based on the position parameter
         const backgroundPosition = this.config.pattern?.position || 'center';
+        const justifyContent = this.config.alignContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignContent === 'center' ? 'center' : 'stretch';
         return {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent, // Apply conditional vertical alignment
+            alignItems, // Apply conditional horizontal alignment
             backgroundColor,
             width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
             height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
@@ -2292,6 +2300,32 @@ class PTCardComponent {
             backgroundSize,
             backgroundPosition,
             backgroundRepeat,
+            zIndex: this.config.zIndex !== undefined ? this.config.zIndex : 'auto',
+        };
+    }
+    getBodyStyles() {
+        const justifyContent = this.config.alignBodyContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignBodyContent === 'center' ? 'center' : 'stretch';
+        return {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent,
+            alignItems,
+            flexGrow: 1,
+            maxWidth: '100%',
+            padding: '16px', // Default padding for body
+            boxSizing: 'border-box',
+        };
+    }
+    getHeaderStyles() {
+        const justifyContent = this.config.alignHeaderContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignHeaderContent === 'center' ? 'center' : 'stretch';
+        return {
+            display: 'flex',
+            justifyContent,
+            alignItems,
+            marginBottom: '16px', // Default margin for header
+            position: 'relative',
         };
     }
     isScrollableHorizontal() {
@@ -2300,12 +2334,21 @@ class PTCardComponent {
     isScrollableVertical() {
         return !!this.config.scrollableVertical;
     }
+    getCardClass() {
+        return this.config.alignContent === 'center' ? 'center-align' : '';
+    }
+    getBodyClass() {
+        return this.config.alignBodyContent === 'center' ? 'center-align' : '';
+    }
+    getHeaderClass() {
+        return this.config.alignHeaderContent === 'center' ? 'center-align' : '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], 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\n  class=\"pt-card card\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\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;position:relative}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{flex-grow:1;max-width:100%;z-index:1}.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"] }] }); }
+    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\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  <div\n    *ngIf=\"hasTitle()\"\n    class=\"card-header\"\n    [ngClass]=\"getHeaderClass()\"\n    [ngStyle]=\"getHeaderStyles()\"\n  >\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\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.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\n  class=\"pt-card card\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\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;position:relative}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{flex-grow:1;max-width:100%;z-index:1}.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"] }]
+            args: [{ selector: 'pt-card', template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  <div\n    *ngIf=\"hasTitle()\"\n    class=\"card-header\"\n    [ngClass]=\"getHeaderClass()\"\n    [ngStyle]=\"getHeaderStyles()\"\n  >\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\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2344,7 +2387,11 @@ class PTMenuFancyComponent {
             icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
             menuDirection: 'right',
         };
-        this.cardMenuConfig = { noBorder: true, margin: '0', padding: '5px' };
+        this.cardMenuConfig = {
+            noBorder: true,
+            margin: '0',
+            padding: '5px',
+        };
         this.isOpen = false;
     }
     static { this.DEFAULT_TEXT_COLOR = '#000'; }
@@ -2414,11 +2461,11 @@ class PTMenuFancyComponent {
         }
     }
     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"] }] }); }
+    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:3;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"] }]
+            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:3;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: [{
@@ -3118,21 +3165,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
-class PTLoginPageComponent {
+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 PTLoginCardComponent {
     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 || '',
+            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';
@@ -3178,11 +3237,11 @@ class PTLoginPageComponent {
             ...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,
+        this.loginPageConfig.loginCardConfig = {
+            noBorder: this.loginPageConfig.loginCardConfig?.noBorder ?? true,
+            width: this.loginPageConfig.loginCardConfig?.width ?? '400px',
+            padding: this.loginPageConfig.loginCardConfig?.padding ?? '40px',
+            ...this.loginPageConfig.loginCardConfig,
         };
         // Initialize usernameField
         this.loginPageConfig.usernameField = {
@@ -3215,11 +3274,7 @@ class PTLoginPageComponent {
             ...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() {
+    onSubmit() {
         if (this.formGroup.valid) {
             this.loginSubmit.emit(this.formGroup.value);
         }
@@ -3239,31 +3294,70 @@ class PTLoginPageComponent {
         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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n    <img\n      [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n      [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n      [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n      [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n    />\n  </div>\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px'\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n      {{ loginPageConfig.login?.errorMessage }}\n    </div>\n\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\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}@media (max-width: 768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginCardComponent, 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"] }]
+            args: [{ selector: 'pt-login-card', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PTCardModule,
+                        PTButtonModule,
+                        PTTextInputModule,
+                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\n  <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n    <img\n      [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n      [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n      [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n      [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n    />\n  </div>\n\n  <!-- Title -->\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px'\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n      {{ loginPageConfig.login?.errorMessage }}\n    </div>\n\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\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}@media (max-width: 768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\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] }); }
+class PTLoginPageComponent {
+    constructor() {
+        this.loginSubmit = new EventEmitter();
+        this.defaultCardConfig = {
+            borderRadius: '0',
+            margin: '0',
+            width: '100%',
+            height: '100%',
+            noBorder: true,
+            alignContent: 'center',
+            alignBodyContent: 'center',
+        };
+    }
+    ngOnInit() {
+        this.applyDefaultConfigs();
+    }
+    applyDefaultConfigs() {
+        // Apply defaults to centerCardConfig
+        this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
+        // Apply defaults to leftCardConfig
+        this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
+        // Apply defaults to rightCardConfig
+        this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
+    }
+    applyDefaults(config) {
+        return {
+            ...this.defaultCardConfig,
+            ...(config || {}),
+        };
+    }
+    onLoginSubmit(loginModel) {
+        console.log('Login Submitted:', loginModel);
+        this.loginSubmit.emit(loginModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, deps: [], 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: "<!-- Center Position -->\n<ng-container>\n  <div *ngIf=\"loginPageConfig.position === 'center'\" class=\"center-container\">\n    <pt-card\n      *ngIf=\"loginPageConfig.centerCardConfig\"\n      [config]=\"loginPageConfig.centerCardConfig\"\n    >\n      <pt-login-card\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n  </div>\n  <!-- Left and Right Positions -->\n  <div\n    *ngIf=\"\n      loginPageConfig.position === 'left' ||\n      loginPageConfig.position === 'right'\n    \"\n    class=\"left-right-container\"\n  >\n    <!-- Left Card -->\n    <pt-card\n      *ngIf=\"loginPageConfig.leftCardConfig\"\n      [config]=\"loginPageConfig.leftCardConfig\"\n    >\n      <pt-login-card\n        *ngIf=\"loginPageConfig.position === 'left'\"\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n\n    <!-- Right Card -->\n    <pt-card\n      *ngIf=\"loginPageConfig.rightCardConfig\"\n      [config]=\"loginPageConfig.rightCardConfig\"\n    >\n      <pt-login-card\n        *ngIf=\"loginPageConfig.position === 'right'\"\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n  </div>\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig"], outputs: ["loginSubmit"] }] }); }
 }
-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],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-login-page', template: "<!-- Center Position -->\n<ng-container>\n  <div *ngIf=\"loginPageConfig.position === 'center'\" class=\"center-container\">\n    <pt-card\n      *ngIf=\"loginPageConfig.centerCardConfig\"\n      [config]=\"loginPageConfig.centerCardConfig\"\n    >\n      <pt-login-card\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n  </div>\n  <!-- Left and Right Positions -->\n  <div\n    *ngIf=\"\n      loginPageConfig.position === 'left' ||\n      loginPageConfig.position === 'right'\n    \"\n    class=\"left-right-container\"\n  >\n    <!-- Left Card -->\n    <pt-card\n      *ngIf=\"loginPageConfig.leftCardConfig\"\n      [config]=\"loginPageConfig.leftCardConfig\"\n    >\n      <pt-login-card\n        *ngIf=\"loginPageConfig.position === 'left'\"\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n\n    <!-- Right Card -->\n    <pt-card\n      *ngIf=\"loginPageConfig.rightCardConfig\"\n      [config]=\"loginPageConfig.rightCardConfig\"\n    >\n      <pt-login-card\n        *ngIf=\"loginPageConfig.position === 'right'\"\n        [loginPageConfig]=\"loginPageConfig\"\n        (loginSubmit)=\"onLoginSubmit($event)\"\n      ></pt-login-card>\n    </pt-card>\n  </div>\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"] }]
+        }], propDecorators: { loginPageConfig: [{
+                type: Input
+            }], loginSubmit: [{
+                type: Output
+            }] } });
 
 class PTLoginPageModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3272,13 +3366,15 @@ class PTLoginPageModule {
             ReactiveFormsModule,
             PTTextInputModule,
             PTCardModule,
-            PTButtonModule], exports: [PTLoginPageComponent] }); }
+            PTButtonModule,
+            PTLoginCardComponent], 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] }); }
+            PTButtonModule,
+            PTLoginCardComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, decorators: [{
             type: NgModule,
@@ -3291,6 +3387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTTextInputModule,
                         PTCardModule,
                         PTButtonModule,
+                        PTLoginCardComponent,
                     ],
                     exports: [PTLoginPageComponent],
                 }]
@@ -3414,7 +3511,7 @@ class NgPrimeToolsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
-            NgAdvancedPrimeTableModule,
+            PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -3449,7 +3546,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
-            PTDialogModule], exports: [NgAdvancedPrimeTableModule,
+            PTDialogModule], exports: [PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -3487,7 +3584,7 @@ class NgPrimeToolsModule {
             PTDialogModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
-            NgAdvancedPrimeTableModule,
+            PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -3522,7 +3619,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
-            PTDialogModule, NgAdvancedPrimeTableModule,
+            PTDialogModule, PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -3565,7 +3662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     imports: [
                         CommonModule,
                         FormsModule,
-                        NgAdvancedPrimeTableModule,
+                        PTAdvancedPrimeTableModule,
                         MultiSearchCriteriaModule,
                         // Inputs
                         PTCheckBoxInputModule,
@@ -3603,7 +3700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTDialogModule,
                     ],
                     exports: [
-                        NgAdvancedPrimeTableModule,
+                        PTAdvancedPrimeTableModule,
                         MultiSearchCriteriaModule,
                         // Inputs
                         PTCheckBoxInputModule,
@@ -3763,5 +3860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
+export { BadgeType, BadgeTypeStyles, ButtonColorEnum, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, SearchCriteriaTypeEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map