npm - ln-20-lib-components - Versions diffs - 0.0.58 → 0.0.60 - Mend

ln-20-lib-components 0.0.58 → 0.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-CCQOaJ4C.mjs → ln-20-lib-components-ln-20-lib-components-BiMy0h5e.mjs} RENAMED Viewed

@@ -2442,7 +2442,7 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-U-zOTSrU.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-POabYPFu.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
@@ -2564,7 +2564,7 @@ class TableNgComponent {
     totalRows = computed(() => this.data().length);
     // Loading state management
     loadingTimeout = null;
-    isLoading = signal(false);
+    isLoading = model(false);
     timeoutExpired = signal(false);
     config = model();
     editConfig = model();
@@ -3583,7 +3583,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 }, 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", outputCheckAll: "outputCheckAll", 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;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, inputConfig![column.field]!.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, inputConfig![key]!.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig?.isEnabled && enableErrors && rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ?? '' }}\r\n          </span>\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig?.isEnabled && enableErrors && rowErrorConfig?.fieldErrors?.[item.id]?.[key]) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ?? '' }}\r\n          </span>\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\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,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\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,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\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: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, 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", isLoading: "isLoadingChange", 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", outputCheckAll: "outputCheckAll", 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;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, inputConfig![column.field]!.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, inputConfig![key]!.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig?.isEnabled && enableErrors && rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ?? '' }}\r\n          </span>\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig?.isEnabled && enableErrors && rowErrorConfig?.fieldErrors?.[item.id]?.[key]) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ?? '' }}\r\n          </span>\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\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,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\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,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\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: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
             type: Component,
@@ -3680,4 +3680,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, SpeedDialComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b, SpeedDialService as c, SpeedDialNgComponent as d };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-CCQOaJ4C.mjs.map
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-BiMy0h5e.mjs.map