ln-20-lib-components 0.0.35 → 0.0.37

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-DE-pK0LP.mjs → ln-20-lib-components-ln-20-lib-components-CeFk-mqA.mjs}

@@ -1670,15 +1670,22 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-AanG8joZ.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-sGivAKM5.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
+            delete configSelectedItems.lazyLoadingConfig;
             const selectionTableConfig = {
                 ...(configSelectedItems.selectionTableConfig ?? {}),
                 showManagementConfig: false
             };
-            delete configSelectedItems.lazyLoadingConfig;
+            const globalFilterConfig = {
+                ...(configSelectedItems.globalFilterConfig ?? {}),
+                advancedIdentifierFiltersConfig: {
+                    isEnabled: false
+                }
+            };
+            configSelectedItems.globalFilterConfig = globalFilterConfig;
             configSelectedItems.selectionTableConfig = selectionTableConfig;
         }
         const ref = this.dialogService?.open(SelectedItemsManagementComponent, {
@@ -2344,6 +2351,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             args: [{ selector: 'lib-modal-advanced-filter', imports: [AdvancedFilterComponent, ButtonNgComponent], template: "<div class=\"flex flex-col gap-4\">\r\n  <lib-advanced-filter [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"></lib-advanced-filter>\r\n  <div class=\"flex justify-end\">\r\n    <lib-button-ng [buttonConfig]=\"applyFiltersButton()\"></lib-button-ng>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
+class SpeedDialNgService {
+    constructor() { }
+    _config = signal({});
+    config = this._config.asReadonly();
+    items = computed(() => this.config().items);
+    buttonProps = computed(() => this.config().buttonProps ?? { severity: 'primary', rounded: true });
+    tooltipOptions = computed(() => this.config().tooltipOptions ?? { tooltipPosition: 'top' });
+    style = computed(() => this.config().style ?? {});
+    direction = computed(() => this.config().direction ?? 'down');
+    setConfig(value) {
+        this._config.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class SpeedDialNgComponent {
+    speedDialNgService = inject(SpeedDialNgService);
+    configInput = input.required();
+    constructor() {
+    }
+    ngOnInit() {
+        this.speedDialNgService.setConfig(this.configInput());
+    }
+    get config() {
+        return this.speedDialNgService.config();
+    }
+    get items() {
+        return this.speedDialNgService.items();
+    }
+    get buttonProps() {
+        return this.speedDialNgService.buttonProps();
+    }
+    get tooltipOptions() {
+        return this.speedDialNgService.tooltipOptions();
+    }
+    get style() {
+        return this.speedDialNgService.style();
+    }
+    get direction() {
+        return this.speedDialNgService.direction();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SpeedDialNgComponent, isStandalone: true, selector: "lib-speed-dial-ng", inputs: { configInput: { classPropertyName: "configInput", publicName: "configInput", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialNgService], ngImport: i0, template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>", styles: [""], dependencies: [{ kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i1$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-speed-dial-ng', imports: [SpeedDialModule], providers: [SpeedDialNgService], template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>" }]
+        }], ctorParameters: () => [] });
+
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 class TableNgComponent {
     tableNgService = inject(TableNgService);
@@ -2358,6 +2421,7 @@ class TableNgComponent {
     editConfig = model();
     footerConfig = model();
     toolbarButtons = model([]);
+    toolbarSpeedDialButtons = model([]);
     sourceElements = model([]);
     targetElements = model([]);
     httpMessage = model();
@@ -3248,7 +3312,7 @@ class TableNgComponent {
         return this.tableNgService.refreshButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.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", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial-ng [configInput]=\"speedDial\"></lib-speed-dial-ng>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.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", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialNgComponent, selector: "lib-speed-dial-ng", inputs: ["configInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
             type: Component,
@@ -3262,8 +3326,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         FormsModule,
                         InlineInputComponent,
                         BadgeNgComponent,
-                        HttpMessageComponent
-                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                        HttpMessageComponent,
+                        SpeedDialNgComponent
+                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial-ng [configInput]=\"speedDial\"></lib-speed-dial-ng>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -3272,62 +3337,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['item', { static: true }]
             }] } });
 
-class SpeedDialNgService {
-    constructor() { }
-    _config = signal({});
-    config = this._config.asReadonly();
-    items = computed(() => this.config().items);
-    buttonProps = computed(() => this.config().buttonProps ?? { severity: 'primary', rounded: true });
-    tooltipOptions = computed(() => this.config().tooltipOptions ?? { tooltipPosition: 'top' });
-    style = computed(() => this.config().style ?? {});
-    direction = computed(() => this.config().direction ?? 'down');
-    setConfig(value) {
-        this._config.set(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class SpeedDialNgComponent {
-    speedDialNgService = inject(SpeedDialNgService);
-    configInput = input.required();
-    constructor() {
-    }
-    ngOnInit() {
-        this.speedDialNgService.setConfig(this.configInput());
-    }
-    get config() {
-        return this.speedDialNgService.config();
-    }
-    get items() {
-        return this.speedDialNgService.items();
-    }
-    get buttonProps() {
-        return this.speedDialNgService.buttonProps();
-    }
-    get tooltipOptions() {
-        return this.speedDialNgService.tooltipOptions();
-    }
-    get style() {
-        return this.speedDialNgService.style();
-    }
-    get direction() {
-        return this.speedDialNgService.direction();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SpeedDialNgComponent, isStandalone: true, selector: "lib-speed-dial-ng", inputs: { configInput: { classPropertyName: "configInput", publicName: "configInput", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialNgService], ngImport: i0, template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>", styles: [""], dependencies: [{ kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i1$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-speed-dial-ng', imports: [SpeedDialModule], providers: [SpeedDialNgService], template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>" }]
-        }], ctorParameters: () => [] });
-
 /*
  * Public API Surface of lib-components
 
@@ -3344,4 +3353,4 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  */
 
 export { AminatedContainerComponent as A, BaseDialogComponent as B, DisabledContainerComponent as D, ETypeInput as E, FormComponent as F, HttpMessageComponent as H, InlineInputComponent as I, LibComponentsService as L, SpeedDialNgComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-DE-pK0LP.mjs.map
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-CeFk-mqA.mjs.map