@solcre-org/core-ui 2.20.4 → 2.20.6

package/fesm2022/solcre-org-core-ui.mjs

@@ -5333,6 +5333,7 @@ class DynamicFieldDirective {
     onEnterEvent = output();
     selectionChange = output();
     componentRef = null;
+    templateViewRef = null;
     fieldComponents = {
         text: TextFieldComponent,
         textarea: TextAreaFieldComponent,
@@ -5372,13 +5373,40 @@ class DynamicFieldDirective {
             this.componentRef.setInput('formValue', this.formValue());
             this.componentRef.changeDetectorRef.detectChanges();
         }
+        if (this.templateViewRef) {
+            this.updateTemplateContext();
+        }
+    }
+    getCustomViewTemplate() {
+        const fieldConfig = this.field();
+        const modeConfig = fieldConfig.modes?.[this.mode()];
+        if (modeConfig?.customViewTemplate && this.isTemplateRef(modeConfig.customViewTemplate)) {
+            return modeConfig.customViewTemplate;
+        }
+        if (fieldConfig?.customViewTemplate && this.isTemplateRef(fieldConfig.customViewTemplate)) {
+            return fieldConfig.customViewTemplate;
+        }
+        return null;
+    }
+    isTemplateRef(template) {
+        return template && typeof template === 'object' && 'createEmbeddedView' in template;
     }
     loadComponent() {
         this.viewContainerRef.clear();
         if (this.componentRef) {
             this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        if (this.templateViewRef) {
+            this.templateViewRef.destroy();
+            this.templateViewRef = null;
         }
         const fieldConfig = this.field();
+        const customTemplate = this.getCustomViewTemplate();
+        if (customTemplate) {
+            this.renderCustomTemplate(customTemplate);
+            return;
+        }
         const hasMultiEntryConfig = fieldConfig && 'multiEntryConfig' in fieldConfig &&
             fieldConfig.multiEntryConfig?.allowMultipleEntries;
         let componentType;
@@ -5416,6 +5444,35 @@ class DynamicFieldDirective {
         }
         this.componentRef.changeDetectorRef.detectChanges();
     }
+    renderCustomTemplate(template) {
+        if (!this.templateViewRef) {
+            const context = this.createTemplateContext();
+            this.templateViewRef = this.viewContainerRef.createEmbeddedView(template, context);
+        }
+        this.templateViewRef.detectChanges();
+    }
+    createTemplateContext() {
+        return {
+            $implicit: this.value(),
+            value: this.value(),
+            data: this.rowData(),
+            mode: this.mode(),
+            errors: this.errors(),
+            formValue: this.formValue()
+        };
+    }
+    updateTemplateContext() {
+        if (this.templateViewRef) {
+            const context = this.templateViewRef.context;
+            context.$implicit = this.value();
+            context.value = this.value();
+            context.data = this.rowData();
+            context.mode = this.mode();
+            context.errors = this.errors();
+            context.formValue = this.formValue();
+            this.templateViewRef.detectChanges();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DynamicFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: DynamicFieldDirective, isStandalone: true, selector: "[coreDynamicField]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0 });
 }
@@ -11821,6 +11878,11 @@ class HeaderService {
     globalCustomClass = signal('');
     headerOutside = signal(false);
     headerActions = signal([]);
+    headerFilterValues = signal(new Map());
+    pendingHeaderFilters = signal(new Map());
+    headerFilterChangeCallback = signal(undefined);
+    applyHeaderFiltersCallback = signal(undefined);
+    clearHeaderFiltersCallback = signal(undefined);
     refreshCallback = signal(undefined);
     hasFilters = computed(() => {
         return this.showFilter() || this.customFilters().length > 0;
@@ -11904,6 +11966,11 @@ class HeaderService {
         this.headerOutside.set(false);
         this.refreshCallback.set(undefined);
         this.headerActions.set([]);
+        this.headerFilterValues.set(new Map());
+        this.pendingHeaderFilters.set(new Map());
+        this.headerFilterChangeCallback.set(undefined);
+        this.applyHeaderFiltersCallback.set(undefined);
+        this.clearHeaderFiltersCallback.set(undefined);
     }
     setTitle(title) {
         this.title.set(title);
@@ -12203,6 +12270,36 @@ class HeaderService {
                 return null;
         }
     }
+    getHeaderFilterValues() {
+        return this.headerFilterValues;
+    }
+    setHeaderFilterValues(values) {
+        this.headerFilterValues.set(values);
+    }
+    getHeaderFilterChangeCallback() {
+        return this.headerFilterChangeCallback;
+    }
+    setHeaderFilterChangeCallback(callback) {
+        this.headerFilterChangeCallback.set(callback);
+    }
+    getPendingHeaderFilters() {
+        return this.pendingHeaderFilters;
+    }
+    setPendingHeaderFilters(values) {
+        this.pendingHeaderFilters.set(values);
+    }
+    getApplyHeaderFiltersCallback() {
+        return this.applyHeaderFiltersCallback;
+    }
+    setApplyHeaderFiltersCallback(callback) {
+        this.applyHeaderFiltersCallback.set(callback);
+    }
+    getClearHeaderFiltersCallback() {
+        return this.clearHeaderFiltersCallback;
+    }
+    setClearHeaderFiltersCallback(callback) {
+        this.clearHeaderFiltersCallback.set(callback);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderService, providedIn: 'root' });
 }
@@ -13254,6 +13351,12 @@ class GenericTableComponent {
     });
     currentFilterValues = signal(new Map());
     currentActiveFilters = computed(() => this.generateActiveFilters());
+    headerFilters = computed(() => {
+        return this.customFilters().filter(f => f.showOutsideFilterModal === true);
+    });
+    modalFilters = computed(() => {
+        return this.customFilters().filter(f => f.showOutsideFilterModal !== true);
+    });
     isDeletedFilterActive = computed(() => {
         const filters = this.currentFilterValues();
         let filterKey = this.deletedFilterKey();
@@ -13471,6 +13574,31 @@ class GenericTableComponent {
                 this.tableDataService.updateCustomParams(params, this.MAIN_DATA_LOADER_ID);
             }
         });
+        effect(() => {
+            if (!this.inModal()) {
+                this.headerService.setHeaderFilterValues(this.currentFilterValues());
+                this.headerService.setPendingHeaderFilters(new Map(this.currentFilterValues()));
+                this.headerService.setHeaderFilterChangeCallback((key, value) => {
+                    const pendingFilters = new Map(this.headerService.getPendingHeaderFilters()());
+                    if (value === '' || value === null || value === undefined ||
+                        (Array.isArray(value) && value.length === 0)) {
+                        pendingFilters.delete(key);
+                    }
+                    else {
+                        pendingFilters.set(key, value);
+                    }
+                    this.headerService.setPendingHeaderFilters(pendingFilters);
+                });
+                this.headerService.setApplyHeaderFiltersCallback(() => {
+                    const pendingFilters = this.headerService.getPendingHeaderFilters()();
+                    this.handleFilterChange(pendingFilters);
+                });
+                this.headerService.setClearHeaderFiltersCallback(() => {
+                    this.headerService.setPendingHeaderFilters(new Map());
+                    this.handleFilterChange(new Map());
+                });
+            }
+        });
     }
     processDataInput(inputData) {
         if ((!this.endpoint() || this.endpoint() === '') && Array.isArray(inputData)) {
@@ -14681,7 +14809,7 @@ class GenericTableComponent {
             title: this.listTitle(),
             globalActions: this.globalActions(),
             showFilter: this.showFilter(),
-            customFilters: this.customFilters(),
+            customFilters: this.headerFilters(),
             showCreateButton: this.showCreateButton(),
             hasCreatePermission: this.hasActionWithPermission(TableAction.CREATE),
         });
@@ -14692,7 +14820,7 @@ class GenericTableComponent {
             globalActions: this.globalActions(),
             showDefaultFilter: this.showFilter(),
             showDefaultCreate: this.showCreateButton(),
-            customFilters: this.customFilters(),
+            customFilters: this.headerFilters(),
             customActions: existingCustomActions,
             headerOrder: this.headerOrder(),
             filterButtonConfig: this.filterButtonConfig(),
@@ -15283,7 +15411,7 @@ class GenericTableComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonText: { classPropertyName: "createButtonText", publicName: "createButtonText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, listSubTitle: { classPropertyName: "listSubTitle", publicName: "listSubTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, fixedActionsConfig: { classPropertyName: "fixedActionsConfig", publicName: "fixedActionsConfig", isSignal: true, isRequired: false, transformFunction: null }, deletedFilterKey: { classPropertyName: "deletedFilterKey", publicName: "deletedFilterKey", isSignal: true, isRequired: false, transformFunction: null }, scrollTable: { classPropertyName: "scrollTable", publicName: "scrollTable", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n<div class=\"c-table\" [class.c-table--scroll]=\"scrollTable()\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh \n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\">\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE || actionConfig.action === TableAction.RECOVER) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                @if (customAction.isSwitch && customAction.switchOptions) {\n                  <core-generic-switch\n                    [options]=\"customAction.switchOptions\"\n                    [selectedValue]=\"customAction.switchValue ? customAction.switchValue(row) : null\"\n                    [ariaLabel]=\"customAction.switchAriaLabel || customAction.title\"\n                    (valueChange)=\"onCustomActionSwitchChange($event, customAction, row)\">\n                  </core-generic-switch>\n                } @else {\n                  <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                    (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n\n            @for (outsideAction of getOutsideFixedActionsForRow(row); track $index) {\n              @if (outsideAction.type === 'table' || outsideAction.type === 'custom' ? hasPermission(outsideAction.config) : true) {\n                <core-generic-button \n                  [config]=\"getOutsideFixedActionButtonConfig(outsideAction, row)\"\n                  (buttonClick)=\"onOutsideFixedActionClick($event, outsideAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"c-table-dropdown__holder\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\"\n  [showPagination]=\"shouldShowPagination()\"\n  [showPageSizeSelector]=\"shouldShowPageSizeSelector()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide", "showPagination", "showPageSizeSelector"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericTableComponent, isStandalone: true, selector: "core-generic-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, modalFields: { classPropertyName: "modalFields", publicName: "modalFields", isSignal: true, isRequired: false, transformFunction: null }, modalTabs: { classPropertyName: "modalTabs", publicName: "modalTabs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, filterButtonConfig: { classPropertyName: "filterButtonConfig", publicName: "filterButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonConfig: { classPropertyName: "createButtonConfig", publicName: "createButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, createButtonText: { classPropertyName: "createButtonText", publicName: "createButtonText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "dataInput", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: true, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: false, transformFunction: null }, customParams: { classPropertyName: "customParams", publicName: "customParams", isSignal: true, isRequired: false, transformFunction: null }, customArrayKey: { classPropertyName: "customArrayKey", publicName: "customArrayKey", isSignal: true, isRequired: false, transformFunction: null }, listTitle: { classPropertyName: "listTitle", publicName: "listTitle", isSignal: true, isRequired: false, transformFunction: null }, listSubTitle: { classPropertyName: "listSubTitle", publicName: "listSubTitle", isSignal: true, isRequired: false, transformFunction: null }, moreData: { classPropertyName: "moreData", publicName: "moreData", isSignal: true, isRequired: false, transformFunction: null }, inModal: { classPropertyName: "inModal", publicName: "inModal", isSignal: true, isRequired: false, transformFunction: null }, expansionConfig: { classPropertyName: "expansionConfig", publicName: "expansionConfig", isSignal: true, isRequired: false, transformFunction: null }, fileUploadConfig: { classPropertyName: "fileUploadConfig", publicName: "fileUploadConfig", isSignal: true, isRequired: false, transformFunction: null }, rowStyleConfigs: { classPropertyName: "rowStyleConfigs", publicName: "rowStyleConfigs", isSignal: true, isRequired: false, transformFunction: null }, columnDisabledConfigs: { classPropertyName: "columnDisabledConfigs", publicName: "columnDisabledConfigs", isSignal: true, isRequired: false, transformFunction: null }, rowVisibilityConfigs: { classPropertyName: "rowVisibilityConfigs", publicName: "rowVisibilityConfigs", isSignal: true, isRequired: false, transformFunction: null }, headerOrder: { classPropertyName: "headerOrder", publicName: "headerOrder", isSignal: true, isRequired: false, transformFunction: null }, showActiveFilters: { classPropertyName: "showActiveFilters", publicName: "showActiveFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersConfig: { classPropertyName: "activeFiltersConfig", publicName: "activeFiltersConfig", isSignal: true, isRequired: false, transformFunction: null }, sortConfig: { classPropertyName: "sortConfig", publicName: "sortConfig", isSignal: true, isRequired: false, transformFunction: null }, showManualRefresh: { classPropertyName: "showManualRefresh", publicName: "showManualRefresh", isSignal: true, isRequired: false, transformFunction: null }, manualRefreshConfig: { classPropertyName: "manualRefreshConfig", publicName: "manualRefreshConfig", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonConfig: { classPropertyName: "refreshButtonConfig", publicName: "refreshButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, fixedActionsConfig: { classPropertyName: "fixedActionsConfig", publicName: "fixedActionsConfig", isSignal: true, isRequired: false, transformFunction: null }, deletedFilterKey: { classPropertyName: "deletedFilterKey", publicName: "deletedFilterKey", isSignal: true, isRequired: false, transformFunction: null }, scrollTable: { classPropertyName: "scrollTable", publicName: "scrollTable", isSignal: true, isRequired: false, transformFunction: null }, customEdit: { classPropertyName: "customEdit", publicName: "customEdit", isSignal: true, isRequired: false, transformFunction: null }, customDelete: { classPropertyName: "customDelete", publicName: "customDelete", isSignal: true, isRequired: false, transformFunction: null }, customView: { classPropertyName: "customView", publicName: "customView", isSignal: true, isRequired: false, transformFunction: null }, customSave: { classPropertyName: "customSave", publicName: "customSave", isSignal: true, isRequired: false, transformFunction: null }, useCustomSave: { classPropertyName: "useCustomSave", publicName: "useCustomSave", isSignal: true, isRequired: false, transformFunction: null }, onApiError: { classPropertyName: "onApiError", publicName: "onApiError", isSignal: true, isRequired: false, transformFunction: null }, inlineEditConfig: { classPropertyName: "inlineEditConfig", publicName: "inlineEditConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", selectionChanged: "selectionChanged", dataCreated: "dataCreated", dataUpdated: "dataUpdated", dataDeleted: "dataDeleted", dataFetched: "dataFetched", onMoreDataLoaded: "onMoreDataLoaded", globalActionTriggered: "globalActionTriggered", modalData: "modalData", beforeSave: "beforeSave", onFilterChange: "onFilterChange", onClearFilters: "onClearFilters", activeFilterRemoved: "activeFilterRemoved", activeFiltersCleared: "activeFiltersCleared", dataRefreshed: "dataRefreshed", inlineEditSave: "inlineEditSave", inlineEditModeChanged: "inlineEditModeChanged", inlineEditValidationError: "inlineEditValidationError" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)", "document:click": "closeSubmenu()" } }, providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], viewQueries: [{ propertyName: "sentinel", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "manualRefreshComponent", first: true, predicate: CoreManualRefreshComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"tableActionService.closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: GenericModalComponent, selector: "core-generic-modal", inputs: ["isOpen", "mode", "data", "fields", "tabs", "steps", "title", "isMultiple", "customTemplate", "customViewTemplate", "finalStepTemplate", "buttonConfig", "modelFactory", "errors", "validators", "customHasChanges", "stepValidationEnabled", "allowFreeNavigation", "autoMarkCompleted"], outputs: ["save", "close", "modalData"] }, { kind: "component", type: GenericPaginationComponent, selector: "core-generic-pagination", inputs: ["tableId", "isServerSide", "showPagination", "showPageSizeSelector"] }, { kind: "component", type: DropdownComponent, selector: "core-dropdown", inputs: ["rowId", "triggerElementId", "extraDefaultActions", "extraCustomActions", "row"], outputs: ["actionTriggered", "customActionTriggered"] }, { kind: "component", type: FilterModalComponent, selector: "core-filter-modal", inputs: ["isOpen", "filters", "currentFilterValues"], outputs: ["close", "filterChange", "clearFilters", "globalFilterChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: ActiveFiltersComponent, selector: "core-active-filters", inputs: ["activeFilters", "config"], outputs: ["onFilterRemove", "onClearAll"] }, { kind: "component", type: CoreManualRefreshComponent, selector: "core-manual-refresh", inputs: ["config", "refreshId"], outputs: ["onRefresh", "timestampUpdated"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: FixedActionsMobileModalComponent, selector: "core-fixed-actions-mobile-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
@@ -15300,7 +15428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CoreManualRefreshComponent,
                         GenericSwitchComponent,
                         FixedActionsMobileModalComponent,
-                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\">\n  </core-active-filters>\n}\n<div class=\"c-table\" [class.c-table--scroll]=\"scrollTable()\" [class.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh \n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\">\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <th class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"masterToggle()\" />\n        </th>\n        }\n        @for (column of columns(); track $index) {\n        <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n          @if (isColumnSortable(column)) {\n          <button class=\"c-table-order\" tabindex=\"-1\"\n            [class.is-asc]=\"getColumnSortState(column) === SortDirection.ASC\"\n            [class.is-desc]=\"getColumnSortState(column) === SortDirection.DESC\"\n            [class.has-multiple-sorts]=\"isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null\"\n            [title]=\"getSortButtonTitle(column)\"\n            (click)=\"onColumnHeaderClick(column)\">\n            {{ column.label | translate }}\n            <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n            <span class=\"c-table-order__controls\">\n              <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n              <span class=\"c-table-order__arrow--asc icon-arrow-down\"></span>\n            </span>\n          </button>\n          } @else {\n          {{ column.label | translate }}\n          }\n        </th>\n        }\n        @if (showActions() && (actions().length > 0 || customActions().length > 0)) {\n        <th class=\"u-align-right\">{{ 'table.actions' | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n      <tr [ngClass]=\"getRowClasses(row)\" \n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\">\n        @if (showSelection()) {\n        <!-- Todo: Tabla con row selection -->\n        <td class=\"select-column\">\n          <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row)\" />\n        </td>\n        }\n        @for (column of columns(); track $index) {\n        <td [attr.data-label]=\"column.label | translate\" \n            [ngClass]=\"[\n              column.align ? 'u-align-' + column.align : '',\n              getCellDisabledClasses(row, column)\n            ]\" \n            [class.is-editing]=\"isColumnEditable(column, row)\"\n            [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\">\n          @if (column.template) {\n          <!-- Todo: Ver qu\u00E9 es esto -->\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\"></ng-container>\n          } @else if (isColumnEditable(column, row)) {\n            <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n            <div class=\"c-table__inline-edit\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong>\n              <div\n                coreDynamicField\n                [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                [value]=\"getEditingValue(row, column)\"\n                [mode]=\"ModalMode.EDIT\"\n                [errors]=\"getCellErrors(row, column)\"\n                [rowData]=\"row\"\n                (valueChange)=\"onCellValueChange(row, column, $event)\"\n                (onBlurEvent)=\"onCellBlur(row, column)\"\n                (onEnterEvent)=\"onCellEnter(row, column)\"\n              ></div>\n            </div>\n          } @else {\n            <div class=\"c-table__content\">\n              <strong class=\"c-table__mobile-heading\">{{ column.label | translate }}:</strong> {{ getFormattedValue(row,\n              column) }}\n            </div>\n          }\n        </td>\n        }\n\n        <!-- Actions-->\n\n        @if (showActions() && (actions().length > 0 || customActions().length > 0 || expansionConfig()?.enabled)) {\n\n        <td class=\"u-align-right\">\n          <div class=\"c-table__actions\">\n            <core-dropdown [rowId]=\"row.getId()\" [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                [extraCustomActions]=\"getVisibleCustomActions(row, true)\" [row]=\"row\"\n                [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                (customActionTriggered)=\"triggerCustomAction($event.action, $event.row)\" #dropdown>\n              </core-dropdown>\n            @for (actionConfig of getVisibleDefaultActions(row, false); track actionConfig.action) {\n              @if (hasPermission(actionConfig)) {\n                @if (actionConfig.action === TableAction.VIEW || actionConfig.action === TableAction.EDIT ||\n                actionConfig.action === TableAction.DELETE || actionConfig.action === TableAction.RECOVER) {\n                  <core-generic-button [config]=\"getActionButtonConfig(actionConfig.action, actionConfig, row)\"\n                    (buttonClick)=\"onButtonClick($event, actionConfig.action, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n            @for (customAction of getVisibleCustomActions(row, false); track customAction.label || $index) {\n              @if (hasPermission(customAction)) {\n                @if (customAction.isSwitch && customAction.switchOptions) {\n                  <core-generic-switch\n                    [options]=\"customAction.switchOptions\"\n                    [selectedValue]=\"customAction.switchValue ? customAction.switchValue(row) : null\"\n                    [ariaLabel]=\"customAction.switchAriaLabel || customAction.title\"\n                    (valueChange)=\"onCustomActionSwitchChange($event, customAction, row)\">\n                  </core-generic-switch>\n                } @else {\n                  <core-generic-button [config]=\"getCustomActionButtonConfigForRow(customAction, row)\"\n                    (buttonClick)=\"onButtonClick($event, customAction, row)\">\n                  </core-generic-button>\n                }\n              }\n            }\n\n            @for (outsideAction of getOutsideFixedActionsForRow(row); track $index) {\n              @if (outsideAction.type === 'table' || outsideAction.type === 'custom' ? hasPermission(outsideAction.config) : true) {\n                <core-generic-button \n                  [config]=\"getOutsideFixedActionButtonConfig(outsideAction, row)\"\n                  (buttonClick)=\"onOutsideFixedActionClick($event, outsideAction, row)\">\n                </core-generic-button>\n              }\n            }\n\n            @if (hasExtraActionsForRow(row)) {\n              <core-generic-button [config]=\"getMoreActionsButtonConfig(row.getId())\" [data]=\"row\"\n                (buttonClick)=\"onMoreActionsClick($event, row.getId())\" #dropdownTrigger>\n              </core-generic-button>\n            }\n\n            @if (expansionConfig()?.enabled) {\n              <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n              <core-generic-button [config]=\"getExpandButtonConfig(row)\" (buttonClick)=\"onExpandButtonClick($event, row)\">\n              </core-generic-button>\n            }\n\n          </div> <!-- .c-table__actions -->\n        </td> <!-- td parent of .c-table__actions -->\n        } <!-- @if (showActions() -->\n\n\n      </tr>\n      @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n        <!-- Todo: Ver que es esto -->\n        <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"c-table-dropdown__holder\">\n            <ng-container *ngTemplateOutlet=\"expansionConfig()!.template; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n        </tr>\n      }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ 'table.noData' | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div> <!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n<!-- Todo: Ver qu\u00E9 onda esto -->\n<div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n<core-generic-pagination \n  [tableId]=\"tableId\" \n  [isServerSide]=\"!!endpoint()\"\n  [showPagination]=\"shouldShowPagination()\"\n  [showPageSizeSelector]=\"shouldShowPageSizeSelector()\">\n</core-generic-pagination>\n}\n\n<core-generic-modal [isOpen]=\"tableActionService.getIsModalOpen()\" [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\" [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\" [title]=\"tableActionService.getModalTitle()\" [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\" (close)=\"tableActionService.closeModal()\" (modalData)=\"onModalData($event)\">\n</core-generic-modal>\n\n<core-filter-modal [isOpen]=\"isFilterModalOpen()\" [filters]=\"customFilters()\" [currentFilterValues]=\"currentFilterValues()\" (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\" (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\">\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"] }]
+                    ], hostDirectives: [CoreHostDirective], providers: [TableDataService, FilterService, PaginationService, ModelApiService, InlineEditService], template: "@if (showActiveFilters()) {\n  <core-active-filters\n    [activeFilters]=\"currentActiveFilters()\"\n    [config]=\"activeFiltersConfig()\"\n    (onFilterRemove)=\"onActiveFilterRemove($event)\"\n    (onClearAll)=\"onActiveFiltersClear()\"\n  >\n  </core-active-filters>\n}\n<div\n  class=\"c-table\"\n  [class.c-table--scroll]=\"scrollTable()\"\n  [class.in-modal]=\"inModal()\"\n  [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\"\n>\n  @if (shouldShowManualRefresh()) {\n    <core-manual-refresh\n      [config]=\"getManualRefreshConfig()\"\n      (onRefresh)=\"onManualRefresh()\"\n    >\n    </core-manual-refresh>\n  }\n  <table>\n    <thead>\n      <tr>\n        @if (showSelection()) {\n          <!-- Todo: Tabla con row selection -->\n          <th class=\"select-column\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              (change)=\"masterToggle()\"\n            />\n          </th>\n        }\n        @for (column of columns(); track $index) {\n          <th [ngClass]=\"column.align ? 'u-align-' + column.align : ''\">\n            @if (isColumnSortable(column)) {\n              <button\n                class=\"c-table-order\"\n                tabindex=\"-1\"\n                [class.is-asc]=\"\n                  getColumnSortState(column) === SortDirection.ASC\n                \"\n                [class.is-desc]=\"\n                  getColumnSortState(column) === SortDirection.DESC\n                \"\n                [class.has-multiple-sorts]=\"\n                  isMultiColumnSortEnabled() &&\n                  getColumnSortPriority(column) !== null\n                \"\n                [title]=\"getSortButtonTitle(column)\"\n                (click)=\"onColumnHeaderClick(column)\"\n              >\n                {{ column.label | translate }}\n                <!-- @if (isMultiColumnSortEnabled() && getColumnSortPriority(column) !== null) {\n              <span class=\"c-table-order__priority\">{{ getColumnSortPriority(column)! + 1 }}</span>\n            } -->\n                <span class=\"c-table-order__controls\">\n                  <span class=\"c-table-order__arrow--desc icon-arrow-up\"></span>\n                  <span\n                    class=\"c-table-order__arrow--asc icon-arrow-down\"\n                  ></span>\n                </span>\n              </button>\n            } @else {\n              {{ column.label | translate }}\n            }\n          </th>\n        }\n        @if (\n          showActions() && (actions().length > 0 || customActions().length > 0)\n        ) {\n          <th class=\"u-align-right\">{{ \"table.actions\" | translate }}</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of displayedData(); track row.getId()) {\n        <tr\n          [ngClass]=\"getRowClasses(row)\"\n          [class.is-editable]=\"isRowInEditMode(row.getId())\"\n          [class.is-disabled]=\"isRowDisabled(row)\"\n        >\n          @if (showSelection()) {\n            <!-- Todo: Tabla con row selection -->\n            <td class=\"select-column\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isRowSelected(row)\"\n                (change)=\"toggleRow(row)\"\n              />\n            </td>\n          }\n          @for (column of columns(); track $index) {\n            <td\n              [attr.data-label]=\"column.label | translate\"\n              [ngClass]=\"[\n                column.align ? 'u-align-' + column.align : '',\n                getCellDisabledClasses(row, column),\n              ]\"\n              [class.is-editing]=\"isColumnEditable(column, row)\"\n              [class.is-column-disabled]=\"isColumnDisabledForRow(row, column)\"\n            >\n              @if (column.template) {\n                <!-- Todo: Ver qu\u00E9 es esto -->\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    column.template;\n                    context: { $implicit: row, column: column }\n                  \"\n                ></ng-container>\n              } @else if (isColumnEditable(column, row)) {\n                <!-- !Solcre: Modo de edici\u00F3n en l\u00EDnea usando DynamicField -->\n                <div class=\"c-table__inline-edit\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  <div\n                    coreDynamicField\n                    [field]=\"getInlineEditableConfigWithState(row, column)!\"\n                    [value]=\"getEditingValue(row, column)\"\n                    [mode]=\"ModalMode.EDIT\"\n                    [errors]=\"getCellErrors(row, column)\"\n                    [rowData]=\"row\"\n                    (valueChange)=\"onCellValueChange(row, column, $event)\"\n                    (onBlurEvent)=\"onCellBlur(row, column)\"\n                    (onEnterEvent)=\"onCellEnter(row, column)\"\n                  ></div>\n                </div>\n              } @else {\n                <div class=\"c-table__content\">\n                  <strong class=\"c-table__mobile-heading\"\n                    >{{ column.label | translate }}:</strong\n                  >\n                  {{ getFormattedValue(row, column) }}\n                </div>\n              }\n            </td>\n          }\n\n          <!-- Actions-->\n\n          @if (\n            showActions() &&\n            (actions().length > 0 ||\n              customActions().length > 0 ||\n              expansionConfig()?.enabled)\n          ) {\n            <td class=\"u-align-right\">\n              <div class=\"c-table__actions\">\n                <core-dropdown\n                  [rowId]=\"row.getId()\"\n                  [extraDefaultActions]=\"getVisibleDefaultActions(row, true)\"\n                  [extraCustomActions]=\"getVisibleCustomActions(row, true)\"\n                  [row]=\"row\"\n                  [triggerElementId]=\"'dropdown-trigger-' + row.getId()\"\n                  (actionTriggered)=\"triggerAction($event.action, $event.row)\"\n                  (customActionTriggered)=\"\n                    triggerCustomAction($event.action, $event.row)\n                  \"\n                  #dropdown\n                >\n                </core-dropdown>\n                @for (\n                  actionConfig of getVisibleDefaultActions(row, false);\n                  track actionConfig.action\n                ) {\n                  @if (hasPermission(actionConfig)) {\n                    @if (\n                      actionConfig.action === TableAction.VIEW ||\n                      actionConfig.action === TableAction.EDIT ||\n                      actionConfig.action === TableAction.DELETE ||\n                      actionConfig.action === TableAction.RECOVER\n                    ) {\n                      <core-generic-button\n                        [config]=\"\n                          getActionButtonConfig(\n                            actionConfig.action,\n                            actionConfig,\n                            row\n                          )\n                        \"\n                        (buttonClick)=\"\n                          onButtonClick($event, actionConfig.action, row)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n                @for (\n                  customAction of getVisibleCustomActions(row, false);\n                  track customAction.label || $index\n                ) {\n                  @if (hasPermission(customAction)) {\n                    @if (customAction.isSwitch && customAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"customAction.switchOptions\"\n                        [selectedValue]=\"\n                          customAction.switchValue\n                            ? customAction.switchValue(row)\n                            : null\n                        \"\n                        [ariaLabel]=\"\n                          customAction.switchAriaLabel || customAction.title\n                        \"\n                        (valueChange)=\"\n                          onCustomActionSwitchChange($event, customAction, row)\n                        \"\n                      >\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button\n                        [config]=\"\n                          getCustomActionButtonConfigForRow(customAction, row)\n                        \"\n                        (buttonClick)=\"onButtonClick($event, customAction, row)\"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @for (\n                  outsideAction of getOutsideFixedActionsForRow(row);\n                  track $index\n                ) {\n                  @if (\n                    outsideAction.type === \"table\" ||\n                    outsideAction.type === \"custom\"\n                      ? hasPermission(outsideAction.config)\n                      : true\n                  ) {\n                    <core-generic-button\n                      [config]=\"\n                        getOutsideFixedActionButtonConfig(outsideAction, row)\n                      \"\n                      (buttonClick)=\"\n                        onOutsideFixedActionClick($event, outsideAction, row)\n                      \"\n                    >\n                    </core-generic-button>\n                  }\n                }\n\n                @if (hasExtraActionsForRow(row)) {\n                  <core-generic-button\n                    [config]=\"getMoreActionsButtonConfig(row.getId())\"\n                    [data]=\"row\"\n                    (buttonClick)=\"onMoreActionsClick($event, row.getId())\"\n                    #dropdownTrigger\n                  >\n                  </core-generic-button>\n                }\n\n                @if (expansionConfig()?.enabled) {\n                  <!-- \u2705 Solcre: Celda dedicada para expansi\u00F3n en su posici\u00F3n correcta -->\n                  <core-generic-button\n                    [config]=\"getExpandButtonConfig(row)\"\n                    (buttonClick)=\"onExpandButtonClick($event, row)\"\n                  >\n                  </core-generic-button>\n                }\n              </div>\n              <!-- .c-table__actions -->\n            </td>\n            <!-- td parent of .c-table__actions -->\n          }\n          <!-- @if (showActions() -->\n        </tr>\n        @if (expansionConfig()?.enabled && isRowExpanded(row)) {\n          <!-- Todo: Ver que es esto -->\n          <tr class=\"c-table-dropdown\" [ngClass]=\"getRowClasses(row)\">\n            <td\n              [attr.colspan]=\"displayedColumns().length\"\n              class=\"c-table-dropdown__holder\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  expansionConfig()!.template;\n                  context: { $implicit: row }\n                \"\n              >\n              </ng-container>\n            </td>\n          </tr>\n        }\n      } @empty {\n        <tr>\n          <!-- Todo: Estilo .no-data -->\n          <td [attr.colspan]=\"displayedColumns().length\">\n            <p class=\"c-placeholder\">{{ \"table.noData\" | translate }}</p>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<!-- .c-table -->\n\n<!-- Todo: Todo lo que viene dsp de la tabla -->\n\n@if (!enablePagination()) {\n  <!-- Todo: Ver qu\u00E9 onda esto -->\n  <div #sentinel class=\"sentinel\"></div>\n}\n\n@if (enablePagination()) {\n  <core-generic-pagination\n    [tableId]=\"tableId\"\n    [isServerSide]=\"!!endpoint()\"\n    [showPagination]=\"shouldShowPagination()\"\n    [showPageSizeSelector]=\"shouldShowPageSizeSelector()\"\n  >\n  </core-generic-pagination>\n}\n\n<core-generic-modal\n  [isOpen]=\"tableActionService.getIsModalOpen()\"\n  [mode]=\"tableActionService.getModalMode()\"\n  [data]=\"tableActionService.getModalData()\"\n  [fields]=\"hasTabs() ? [] : tableActionService.getModalFieldsToShow()\"\n  [tabs]=\"hasTabs() ? modalTabs() : []\"\n  [title]=\"tableActionService.getModalTitle()\"\n  [modelFactory]=\"modelFactory() || null\"\n  (save)=\"onModalSave($event)\"\n  (close)=\"tableActionService.closeModal()\"\n  (modalData)=\"onModalData($event)\"\n>\n</core-generic-modal>\n\n<core-filter-modal\n  [isOpen]=\"isFilterModalOpen()\"\n  [filters]=\"modalFilters()\"\n  [currentFilterValues]=\"currentFilterValues()\"\n  (close)=\"closeFiltersPopup()\"\n  (filterChange)=\"handleFilterChange($event)\"\n  (globalFilterChange)=\"applyGlobalFilter($event)\"\n  (clearFilters)=\"handleClearFilters()\"\n>\n</core-filter-modal>\n\n<!-- @if (shouldShowFixedActions()) {\n  <div class=\"c-fixed-actions\" [ngClass]=\"'c-fixed-actions--' + (fixedActionsConfig()?.position || 'right')\">\n    @for (action of fixedActionsArray(); track $index) {\n      @if (shouldShowFixedAction(action)) {\n        <button \n          type=\"button\"\n          [ngClass]=\"getFixedActionClass(action)\"\n          [disabled]=\"isFixedActionDisabled(action)\"\n          [title]=\"getFixedActionTooltip(action) || ''\"\n          [attr.aria-label]=\"getFixedActionTooltip(action) || action.label || ''\"\n          (click)=\"onFixedActionClick(action)\">\n        </button>\n      }\n    }\n  </div>\n} -->\n\n<core-fixed-actions-mobile-modal />\n", styles: [".c-table-dropdown{padding:16px;background-color:var(--color-neutral-200);border-top:1px solid var(--color-alternative-100)}.c-table-dropdown td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:var(--color-context-success)}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}@media (max-width: 61.1875rem){.c-table-dropdown{background-color:var(--color-neutral-200);border-radius:0 0 var(--app-br) var(--app-br);border-top:none;margin-top:calc(var(--_gap-y) * -1 - var(--app-br))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sentinel: [{
                 type: ViewChild,
                 args: ['sentinel', { static: false }]
@@ -16544,6 +16672,7 @@ class HeaderComponent {
     cdr = inject(ChangeDetectorRef);
     mobileResolutionService = inject(MobileResolutionService);
     HeaderElementType = HeaderElementType;
+    ModalMode = ModalMode;
     title = 'ASDSAS';
     user;
     isDarkMode = false;
@@ -16784,8 +16913,75 @@ class HeaderComponent {
         }
         return false;
     }
+    getHeaderFilters() {
+        return this.headerService.getCustomFilters();
+    }
+    getFilterValue(key) {
+        const pendingFilters = this.headerService.getPendingHeaderFilters()();
+        const appliedFilters = this.headerService.getHeaderFilterValues()();
+        if (pendingFilters.has(key)) {
+            return pendingFilters.get(key) ?? '';
+        }
+        return appliedFilters.get(key) ?? '';
+    }
+    onFilterValueChange(key, value) {
+        const callback = this.headerService.getHeaderFilterChangeCallback()();
+        if (callback) {
+            callback(key, value);
+        }
+    }
+    onApplyHeaderFilters() {
+        const applyCallback = this.headerService.getApplyHeaderFiltersCallback()();
+        if (applyCallback) {
+            applyCallback();
+        }
+    }
+    hasPendingChanges() {
+        const pending = this.headerService.getPendingHeaderFilters()();
+        const applied = this.headerService.getHeaderFilterValues()();
+        if (pending.size !== applied.size) {
+            return true;
+        }
+        for (const [key, value] of pending.entries()) {
+            if (applied.get(key) !== value) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getFilterErrors(key) {
+        return {};
+    }
+    getApplyFiltersButtonConfig() {
+        return {
+            type: ButtonType.PRIMARY,
+            customClass: 'u-push-t',
+            text: 'table.apply',
+            ariaLabel: 'table.apply',
+            disabled: !this.hasPendingChanges()
+        };
+    }
+    getClearFiltersButtonConfig() {
+        return {
+            type: ButtonType.LINK,
+            customClass: 'u-push-t',
+            text: 'table.clearFilters',
+            ariaLabel: 'table.clearFilters',
+            disabled: !this.hasAnyFilterValue()
+        };
+    }
+    hasAnyFilterValue() {
+        const pending = this.headerService.getPendingHeaderFilters()();
+        return pending.size > 0;
+    }
+    onClearHeaderFilters() {
+        const clearCallback = this.headerService.getClearHeaderFiltersCallback()();
+        if (clearCallback) {
+            clearCallback();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type + '-' + (element.actionId || $index)) {\n          @if (headerService.isElementVisible(element.type, element)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n\n              @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                @if (getIndividualAction(element); as action) {\n                  @if (hasIndividualActionPermission(action)) {\n                    @if (isIndividualActionSwitch(action)) {\n                      <core-generic-switch\n                        [options]=\"action.switchOptions\"\n                        [selectedValue]=\"action.switchSelectedValue\"\n                        [ariaLabel]=\"action.switchAriaLabel || action.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, action)\">\n                      </core-generic-switch>\n                    } @else if (element.actionType === 'global') {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(action)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, action)\">\n                      </core-generic-button>\n                    } @else if (element.actionType === 'custom') {\n                      <core-generic-button \n                        [config]=\"getCustomActionButtonConfig(action)\"\n                        (buttonClick)=\"onCustomButtonClick($event, action)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: HeaderComponent, isStandalone: true, selector: "core-header", outputs: { filterRequested: "filterRequested", createRequested: "createRequested", globalActionTriggered: "globalActionTriggered" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "@if (headerService.getIsVisible()()) {\n  @if (!headerService.getHeaderOutside()()) {\n    <div class=\"c-header\">\n      <div class=\"c-header__row\">\n        <div class=\"c-header__group\">\n          <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n        </div>\n\n        <div class=\"c-header__group u-flex\">\n          @for (\n            element of headerService.getOrderedElements();\n            track element.type + \"-\" + (element.actionId || $index)\n          ) {\n            @if (headerService.isElementVisible(element.type, element)) {\n              @switch (element.type) {\n                @case (HeaderElementType.GLOBAL_ACTIONS) {\n                  @for (\n                    globalAction of headerService.getGlobalActions()();\n                    track globalAction.label || $index\n                  ) {\n                    @if (hasPermission(globalAction)) {\n                      @if (\n                        globalAction.isSwitch && globalAction.switchOptions\n                      ) {\n                        <core-generic-switch\n                          [options]=\"globalAction.switchOptions\"\n                          [selectedValue]=\"globalAction.switchSelectedValue\"\n                          [ariaLabel]=\"\n                            globalAction.switchAriaLabel ||\n                            globalAction.label ||\n                            'Switch options'\n                          \"\n                          (valueChange)=\"\n                            onGlobalSwitchChange($event, globalAction)\n                          \"\n                        >\n                        </core-generic-switch>\n                      } @else {\n                        <core-generic-button\n                          [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                          (buttonClick)=\"\n                            onGlobalButtonClick($event, globalAction)\n                          \"\n                        >\n                        </core-generic-button>\n                      }\n                    }\n                  }\n                }\n\n                @case (HeaderElementType.CUSTOM_ACTIONS) {\n                  @for (\n                    customAction of headerService.getCustomActions()();\n                    track customAction.id\n                  ) {\n                    @if (isCustomActionVisible(customAction)) {\n                      <core-generic-button\n                        [config]=\"getCustomActionButtonConfig(customAction)\"\n                        (buttonClick)=\"\n                          onCustomButtonClick($event, customAction)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @case (HeaderElementType.FILTER) {\n                  <core-generic-button\n                    [config]=\"getFilterButtonConfig()\"\n                    (buttonClick)=\"onFilterButtonClick()\"\n                  >\n                  </core-generic-button>\n                }\n\n                @case (HeaderElementType.CREATE) {\n                  <core-generic-button\n                    [config]=\"getCreateButtonConfig()\"\n                    (buttonClick)=\"onCreateButtonClick()\"\n                  >\n                  </core-generic-button>\n                }\n\n                @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                  @if (getIndividualAction(element); as action) {\n                    @if (hasIndividualActionPermission(action)) {\n                      @if (isIndividualActionSwitch(action)) {\n                        <core-generic-switch\n                          [options]=\"action.switchOptions\"\n                          [selectedValue]=\"action.switchSelectedValue\"\n                          [ariaLabel]=\"\n                            action.switchAriaLabel ||\n                            action.label ||\n                            'Switch options'\n                          \"\n                          (valueChange)=\"onGlobalSwitchChange($event, action)\"\n                        >\n                        </core-generic-switch>\n                      } @else if (element.actionType === \"global\") {\n                        <core-generic-button\n                          [config]=\"getGlobalActionButtonConfig(action)\"\n                          (buttonClick)=\"onGlobalButtonClick($event, action)\"\n                        >\n                        </core-generic-button>\n                      } @else if (element.actionType === \"custom\") {\n                        <core-generic-button\n                          [config]=\"getCustomActionButtonConfig(action)\"\n                          (buttonClick)=\"onCustomButtonClick($event, action)\"\n                        >\n                        </core-generic-button>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n\n      <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n      </p>\n\n      @if (\n        headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) &&\n        headerService.getCustomTemplate()()\n      ) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"\n        ></ng-container>\n      }\n\n      <!-- Custom filters outside modal -->\n      @if (getHeaderFilters()().length > 0) {\n        <div class=\"c-header__bottom\">\n          <div class=\"c-header__filters\">\n            <!-- Filter fields row -->\n            <div>\n              @for (filter of getHeaderFilters()(); track filter.key) {\n                <div class=\"c-header__filter-item\">\n                  <div\n                    coreDynamicField\n                    [field]=\"filter\"\n                    [value]=\"getFilterValue(filter.key.toString())\"\n                    [mode]=\"ModalMode.FILTER\"\n                    [errors]=\"getFilterErrors(filter.key.toString())\"\n                    (valueChange)=\"\n                      onFilterValueChange(filter.key.toString(), $event)\n                    \"\n                  ></div>\n                </div>\n              }\n            </div>\n\n            <!-- Action buttons row -->\n            <div class=\"c-header__filter-actions\">\n              <core-generic-button\n                [config]=\"getApplyFiltersButtonConfig()\"\n                (buttonClick)=\"onApplyHeaderFilters()\"\n              >\n              </core-generic-button>\n              <core-generic-button\n                [config]=\"getClearFiltersButtonConfig()\"\n                (buttonClick)=\"onClearHeaderFilters()\"\n              >\n              </core-generic-button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) &&\n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"\n      ></ng-container>\n    }\n  }\n}\n", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: GenericSwitchComponent, selector: "core-generic-switch", inputs: ["options", "selectedValue", "ariaLabel"], outputs: ["valueChange"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -16793,8 +16989,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CommonModule,
                         TranslateModule,
                         GenericButtonComponent,
-                        GenericSwitchComponent
-                    ], hostDirectives: [CoreHostDirective], template: "@if (headerService.getIsVisible()()) {\n  @if(!headerService.getHeaderOutside()()) {\n  <div class=\"c-header\">\n    <div class=\"c-header__row\">\n\n      <div class=\"c-header__group\">\n\n        <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n\n      </div>\n\n      <div class=\"c-header__group u-flex\">\n\n        @for (element of headerService.getOrderedElements(); track element.type + '-' + (element.actionId || $index)) {\n          @if (headerService.isElementVisible(element.type, element)) {\n            \n            @switch (element.type) {\n              @case (HeaderElementType.GLOBAL_ACTIONS) {\n                @for (globalAction of headerService.getGlobalActions()(); track globalAction.label || $index) {\n                  @if (hasPermission(globalAction)) {\n                    @if (globalAction.isSwitch && globalAction.switchOptions) {\n                      <core-generic-switch\n                        [options]=\"globalAction.switchOptions\"\n                        [selectedValue]=\"globalAction.switchSelectedValue\"\n                        [ariaLabel]=\"globalAction.switchAriaLabel || globalAction.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, globalAction)\">\n                      </core-generic-switch>\n                    } @else {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, globalAction)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.CUSTOM_ACTIONS) {\n                @for (customAction of headerService.getCustomActions()(); track customAction.id) {\n                  @if (isCustomActionVisible(customAction)) {\n                    <core-generic-button \n                      [config]=\"getCustomActionButtonConfig(customAction)\"\n                      (buttonClick)=\"onCustomButtonClick($event, customAction)\">\n                    </core-generic-button>\n                  }\n                }\n              }\n              \n              @case (HeaderElementType.FILTER) {\n                <core-generic-button \n                  [config]=\"getFilterButtonConfig()\"\n                  (buttonClick)=\"onFilterButtonClick()\">\n                </core-generic-button>\n              }\n              \n              @case (HeaderElementType.CREATE) {\n                <core-generic-button \n                  [config]=\"getCreateButtonConfig()\"\n                  (buttonClick)=\"onCreateButtonClick()\">\n                </core-generic-button>\n              }\n\n              @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                @if (getIndividualAction(element); as action) {\n                  @if (hasIndividualActionPermission(action)) {\n                    @if (isIndividualActionSwitch(action)) {\n                      <core-generic-switch\n                        [options]=\"action.switchOptions\"\n                        [selectedValue]=\"action.switchSelectedValue\"\n                        [ariaLabel]=\"action.switchAriaLabel || action.label || 'Switch options'\"\n                        (valueChange)=\"onGlobalSwitchChange($event, action)\">\n                      </core-generic-switch>\n                    } @else if (element.actionType === 'global') {\n                      <core-generic-button \n                        [config]=\"getGlobalActionButtonConfig(action)\"\n                        (buttonClick)=\"onGlobalButtonClick($event, action)\">\n                      </core-generic-button>\n                    } @else if (element.actionType === 'custom') {\n                      <core-generic-button \n                        [config]=\"getCustomActionButtonConfig(action)\"\n                        (buttonClick)=\"onCustomButtonClick($event, action)\">\n                      </core-generic-button>\n                    }\n                  }\n                }\n              }\n            }\n            \n          }\n        }\n\n      </div>\n\n    </div>\n\n    <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n    </p>\n\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  </div>\n  } @else {\n    @if(\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) && \n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"></ng-container>\n    }\n  }\n}", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
+                        GenericSwitchComponent,
+                        DynamicFieldDirective
+                    ], hostDirectives: [CoreHostDirective], template: "@if (headerService.getIsVisible()()) {\n  @if (!headerService.getHeaderOutside()()) {\n    <div class=\"c-header\">\n      <div class=\"c-header__row\">\n        <div class=\"c-header__group\">\n          <h2 class=\"c-header__heading u-heading\">{{ getHeaderTitle() }}</h2>\n        </div>\n\n        <div class=\"c-header__group u-flex\">\n          @for (\n            element of headerService.getOrderedElements();\n            track element.type + \"-\" + (element.actionId || $index)\n          ) {\n            @if (headerService.isElementVisible(element.type, element)) {\n              @switch (element.type) {\n                @case (HeaderElementType.GLOBAL_ACTIONS) {\n                  @for (\n                    globalAction of headerService.getGlobalActions()();\n                    track globalAction.label || $index\n                  ) {\n                    @if (hasPermission(globalAction)) {\n                      @if (\n                        globalAction.isSwitch && globalAction.switchOptions\n                      ) {\n                        <core-generic-switch\n                          [options]=\"globalAction.switchOptions\"\n                          [selectedValue]=\"globalAction.switchSelectedValue\"\n                          [ariaLabel]=\"\n                            globalAction.switchAriaLabel ||\n                            globalAction.label ||\n                            'Switch options'\n                          \"\n                          (valueChange)=\"\n                            onGlobalSwitchChange($event, globalAction)\n                          \"\n                        >\n                        </core-generic-switch>\n                      } @else {\n                        <core-generic-button\n                          [config]=\"getGlobalActionButtonConfig(globalAction)\"\n                          (buttonClick)=\"\n                            onGlobalButtonClick($event, globalAction)\n                          \"\n                        >\n                        </core-generic-button>\n                      }\n                    }\n                  }\n                }\n\n                @case (HeaderElementType.CUSTOM_ACTIONS) {\n                  @for (\n                    customAction of headerService.getCustomActions()();\n                    track customAction.id\n                  ) {\n                    @if (isCustomActionVisible(customAction)) {\n                      <core-generic-button\n                        [config]=\"getCustomActionButtonConfig(customAction)\"\n                        (buttonClick)=\"\n                          onCustomButtonClick($event, customAction)\n                        \"\n                      >\n                      </core-generic-button>\n                    }\n                  }\n                }\n\n                @case (HeaderElementType.FILTER) {\n                  <core-generic-button\n                    [config]=\"getFilterButtonConfig()\"\n                    (buttonClick)=\"onFilterButtonClick()\"\n                  >\n                  </core-generic-button>\n                }\n\n                @case (HeaderElementType.CREATE) {\n                  <core-generic-button\n                    [config]=\"getCreateButtonConfig()\"\n                    (buttonClick)=\"onCreateButtonClick()\"\n                  >\n                  </core-generic-button>\n                }\n\n                @case (HeaderElementType.INDIVIDUAL_ACTION) {\n                  @if (getIndividualAction(element); as action) {\n                    @if (hasIndividualActionPermission(action)) {\n                      @if (isIndividualActionSwitch(action)) {\n                        <core-generic-switch\n                          [options]=\"action.switchOptions\"\n                          [selectedValue]=\"action.switchSelectedValue\"\n                          [ariaLabel]=\"\n                            action.switchAriaLabel ||\n                            action.label ||\n                            'Switch options'\n                          \"\n                          (valueChange)=\"onGlobalSwitchChange($event, action)\"\n                        >\n                        </core-generic-switch>\n                      } @else if (element.actionType === \"global\") {\n                        <core-generic-button\n                          [config]=\"getGlobalActionButtonConfig(action)\"\n                          (buttonClick)=\"onGlobalButtonClick($event, action)\"\n                        >\n                        </core-generic-button>\n                      } @else if (element.actionType === \"custom\") {\n                        <core-generic-button\n                          [config]=\"getCustomActionButtonConfig(action)\"\n                          (buttonClick)=\"onCustomButtonClick($event, action)\"\n                        >\n                        </core-generic-button>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        </div>\n      </div>\n\n      <p class=\"c-header__text u-text\" *ngIf=\"getHeaderText()\">\n        {{ getHeaderText() }}\n      </p>\n\n      @if (\n        headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) &&\n        headerService.getCustomTemplate()()\n      ) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"\n        ></ng-container>\n      }\n\n      <!-- Custom filters outside modal -->\n      @if (getHeaderFilters()().length > 0) {\n        <div class=\"c-header__bottom\">\n          <div class=\"c-header__filters\">\n            <!-- Filter fields row -->\n            <div>\n              @for (filter of getHeaderFilters()(); track filter.key) {\n                <div class=\"c-header__filter-item\">\n                  <div\n                    coreDynamicField\n                    [field]=\"filter\"\n                    [value]=\"getFilterValue(filter.key.toString())\"\n                    [mode]=\"ModalMode.FILTER\"\n                    [errors]=\"getFilterErrors(filter.key.toString())\"\n                    (valueChange)=\"\n                      onFilterValueChange(filter.key.toString(), $event)\n                    \"\n                  ></div>\n                </div>\n              }\n            </div>\n\n            <!-- Action buttons row -->\n            <div class=\"c-header__filter-actions\">\n              <core-generic-button\n                [config]=\"getApplyFiltersButtonConfig()\"\n                (buttonClick)=\"onApplyHeaderFilters()\"\n              >\n              </core-generic-button>\n              <core-generic-button\n                [config]=\"getClearFiltersButtonConfig()\"\n                (buttonClick)=\"onClearHeaderFilters()\"\n              >\n              </core-generic-button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    @if (\n      headerService.isElementVisible(HeaderElementType.CUSTOM_TEMPLATE) &&\n      headerService.getCustomTemplate()()\n    ) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerService.getCustomTemplate()()\"\n      ></ng-container>\n    }\n  }\n}\n", styles: [":root{--header-bg: #ffffff;--header-text: #333;--header-shadow: rgba(0, 0, 0, .1);--logout-btn-color: #e74c3c;--logout-btn-hover: #c0392b;--theme-btn-color: #666;--theme-btn-hover: #007bff}.dark-mode{--header-bg: #1a1a1a;--header-text: #e0e0e0;--header-shadow: rgba(255, 255, 255, .1);--logout-btn-color: #ff6b6b;--logout-btn-hover: #ff8787;--theme-btn-color: #bbb;--theme-btn-hover: #4da8ff}.header{background-color:var(--header-bg);box-shadow:0 2px 4px var(--header-shadow);padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.header .user-info{font-weight:500;color:var(--header-text)}.header .header-actions{display:flex;align-items:center;gap:15px}.header .theme-toggle-btn{background:none;border:none;color:var(--theme-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .theme-toggle-btn:hover{color:var(--theme-btn-hover)}.header .logout-btn{background:none;border:none;color:var(--logout-btn-color);font-size:16px;cursor:pointer;display:flex;align-items:center}.header .logout-btn i{margin-right:5px}.header .logout-btn:hover{color:var(--logout-btn-hover)}\n"] }]
         }], ctorParameters: () => [] });
 
 class MobileHeaderComponent {
@@ -16954,12 +17151,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.20.4',
+    full: '2.20.6',
     major: 2,
     minor: 20,
-    patch: 4,
-    timestamp: '2026-01-29T16:09:53.001Z',
-    buildDate: '29/1/2026'
+    patch: 6,
+    timestamp: '2026-01-30T16:28:53.508Z',
+    buildDate: '30/1/2026'
 };
 
 class MainNavComponent {
@@ -17347,11 +17544,11 @@ class MainNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onNavItemAction: "onNavItemAction" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if(navConfig().showLogo !== false) {\n    <div class=\"c-main-nav__brand c-mn-brand\">\n      @if(getCollapsedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__iso\"\n        [src]=\"getCollapsedLogoSrc()\"\n        [width]=\"getCollapsedLogoSettings().width\"\n        [height]=\"getCollapsedLogoSettings().height\"\n        [alt]=\"getCollapsedLogoSettings().alt\"\n      />\n      } @if(getExpandedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__logo\"\n        [src]=\"getExpandedLogoSrc()\"\n        [width]=\"getExpandedLogoSettings().width\"\n        [height]=\"getExpandedLogoSettings().height\"\n        [alt]=\"getExpandedLogoSettings().alt\"\n      />\n      }\n    </div>\n    }\n\n    <!-- User -->\n    @if(shouldShowUserSection()) {\n    <div class=\"c-main-nav__user c-mn-user\">\n      <div class=\"c-mn-user__short c-mn-user__nav-close\">\n        <span>{{ getUserInitials() }}</span>\n      </div>\n      <div class=\"c-mn-user__nav-open\">\n        <p class=\"c-mn-user__welcome\">\n          @if(userConfig?.greetingKey) {\n          {{ userConfig?.greetingKey ?? \"\" | translate }}\n          } @else if(userConfig?.greetingText) {\n          {{ userConfig?.greetingText }}\n          } @else { Bienvenido/a, }\n        </p>\n        <p class=\"c-mn-user__name\">\n          @if(userConfig?.nameKey) {\n          {{ userConfig?.nameKey ?? \"\" | translate }}\n          } @else if(userConfig?.name) {\n          {{ userConfig?.name }}\n          } @else {\n          {{ getFallbackUserName() }}\n          }\n        </p>\n      </div>\n    </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level)\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if(navConfig().showVersion !== false) {\n        <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onNavItemAction: "onNavItemAction" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if (navConfig().showLogo !== false) {\n      <div class=\"c-main-nav__brand c-mn-brand\">\n        @if (getCollapsedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__iso\"\n            [src]=\"getCollapsedLogoSrc()\"\n            [width]=\"getCollapsedLogoSettings().width\"\n            [height]=\"getCollapsedLogoSettings().height\"\n            [alt]=\"getCollapsedLogoSettings().alt\"\n          />\n        }\n        @if (getExpandedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__logo\"\n            [src]=\"getExpandedLogoSrc()\"\n            [width]=\"getExpandedLogoSettings().width\"\n            [height]=\"getExpandedLogoSettings().height\"\n            [alt]=\"getExpandedLogoSettings().alt\"\n          />\n        }\n      </div>\n    }\n\n    <!-- User -->\n    @if (shouldShowUserSection()) {\n      <div class=\"c-main-nav__user c-mn-user\">\n        <div class=\"c-mn-user__short c-mn-user__nav-close\">\n          <span>{{ getUserInitials() }}</span>\n        </div>\n        <div class=\"c-mn-user__nav-open\">\n          <p class=\"c-mn-user__welcome\">\n            @if (userConfig?.greetingKey) {\n              {{ userConfig?.greetingKey ?? \"\" | translate }}\n            } @else if (userConfig?.greetingText) {\n              {{ userConfig?.greetingText }}\n            } @else {\n              Bienvenido/a,\n            }\n          </p>\n          @if (userConfig?.optionalText) {\n            <p class=\"c-mn-user__optional-text\">\n              {{ userConfig?.optionalText ?? \"\" | translate }}\n            </p>\n          }\n          <p class=\"c-mn-user__name\">\n            @if (userConfig?.nameKey) {\n              {{ userConfig?.nameKey ?? \"\" | translate }}\n            } @else if (userConfig?.name) {\n              {{ userConfig?.name }}\n            } @else {\n              {{ getFallbackUserName() }}\n            }\n          </p>\n        </div>\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level),\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed,\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if (navConfig().showVersion !== false) {\n          <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if(navConfig().showLogo !== false) {\n    <div class=\"c-main-nav__brand c-mn-brand\">\n      @if(getCollapsedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__iso\"\n        [src]=\"getCollapsedLogoSrc()\"\n        [width]=\"getCollapsedLogoSettings().width\"\n        [height]=\"getCollapsedLogoSettings().height\"\n        [alt]=\"getCollapsedLogoSettings().alt\"\n      />\n      } @if(getExpandedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__logo\"\n        [src]=\"getExpandedLogoSrc()\"\n        [width]=\"getExpandedLogoSettings().width\"\n        [height]=\"getExpandedLogoSettings().height\"\n        [alt]=\"getExpandedLogoSettings().alt\"\n      />\n      }\n    </div>\n    }\n\n    <!-- User -->\n    @if(shouldShowUserSection()) {\n    <div class=\"c-main-nav__user c-mn-user\">\n      <div class=\"c-mn-user__short c-mn-user__nav-close\">\n        <span>{{ getUserInitials() }}</span>\n      </div>\n      <div class=\"c-mn-user__nav-open\">\n        <p class=\"c-mn-user__welcome\">\n          @if(userConfig?.greetingKey) {\n          {{ userConfig?.greetingKey ?? \"\" | translate }}\n          } @else if(userConfig?.greetingText) {\n          {{ userConfig?.greetingText }}\n          } @else { Bienvenido/a, }\n        </p>\n        <p class=\"c-mn-user__name\">\n          @if(userConfig?.nameKey) {\n          {{ userConfig?.nameKey ?? \"\" | translate }}\n          } @else if(userConfig?.name) {\n          {{ userConfig?.name }}\n          } @else {\n          {{ getFallbackUserName() }}\n          }\n        </p>\n      </div>\n    </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level)\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if(navConfig().showVersion !== false) {\n        <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n" }]
+            args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if (navConfig().showLogo !== false) {\n      <div class=\"c-main-nav__brand c-mn-brand\">\n        @if (getCollapsedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__iso\"\n            [src]=\"getCollapsedLogoSrc()\"\n            [width]=\"getCollapsedLogoSettings().width\"\n            [height]=\"getCollapsedLogoSettings().height\"\n            [alt]=\"getCollapsedLogoSettings().alt\"\n          />\n        }\n        @if (getExpandedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__logo\"\n            [src]=\"getExpandedLogoSrc()\"\n            [width]=\"getExpandedLogoSettings().width\"\n            [height]=\"getExpandedLogoSettings().height\"\n            [alt]=\"getExpandedLogoSettings().alt\"\n          />\n        }\n      </div>\n    }\n\n    <!-- User -->\n    @if (shouldShowUserSection()) {\n      <div class=\"c-main-nav__user c-mn-user\">\n        <div class=\"c-mn-user__short c-mn-user__nav-close\">\n          <span>{{ getUserInitials() }}</span>\n        </div>\n        <div class=\"c-mn-user__nav-open\">\n          <p class=\"c-mn-user__welcome\">\n            @if (userConfig?.greetingKey) {\n              {{ userConfig?.greetingKey ?? \"\" | translate }}\n            } @else if (userConfig?.greetingText) {\n              {{ userConfig?.greetingText }}\n            } @else {\n              Bienvenido/a,\n            }\n          </p>\n          @if (userConfig?.optionalText) {\n            <p class=\"c-mn-user__optional-text\">\n              {{ userConfig?.optionalText ?? \"\" | translate }}\n            </p>\n          }\n          <p class=\"c-mn-user__name\">\n            @if (userConfig?.nameKey) {\n              {{ userConfig?.nameKey ?? \"\" | translate }}\n            } @else if (userConfig?.name) {\n              {{ userConfig?.name }}\n            } @else {\n              {{ getFallbackUserName() }}\n            }\n          </p>\n        </div>\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level),\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed,\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if (navConfig().showVersion !== false) {\n          <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n" }]
         }], ctorParameters: () => [] });
 
 class LayoutStateService {