@solcre-org/core-ui 2.15.0 → 2.15.1

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

@@ -10847,6 +10847,13 @@ class HeaderService {
     createButtonText = signal(undefined);
     globalCustomClass = signal('');
     headerOutside = signal(false);
+    refreshCallback = signal(undefined);
+    getRefreshCallback() {
+        return this.refreshCallback;
+    }
+    setRefreshCallback(callback) {
+        this.refreshCallback.set(callback);
+    }
     getHeaderOutside() {
         return this.headerOutside;
     }
@@ -10911,6 +10918,7 @@ class HeaderService {
         this.createButtonText.set(undefined);
         this.globalCustomClass.set('');
         this.headerOutside.set(false);
+        this.refreshCallback.set(undefined);
     }
     setTitle(title) {
         this.title.set(title);
@@ -10951,6 +10959,8 @@ class HeaderService {
             this.globalCustomClass.set(config.globalCustomClass);
         if (config.headerOutside !== undefined)
             this.headerOutside.set(config.headerOutside);
+        if (config.refreshCallback !== undefined)
+            this.refreshCallback.set(config.refreshCallback);
     }
     getIsVisible() {
         return this.isVisible;
@@ -11719,11 +11729,225 @@ class GenericSwitchComponent {
         this.valueChange.emit(option.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSwitchComponent, isStandalone: true, selector: "core-generic-switch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<button \n  class=\"c-switch\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"group\">\n  @for (option of options(); track option.value) {\n    <span \n      class=\"c-icon-btn\"\n      [class]=\"option.icon || '' | coreIconCompat\"\n      [class.is-active]=\"isSelected(option.value)\"\n      [class.is-disabled]=\"option.disabled\"\n      [attr.title]=\"option.tooltip || option.label || '' | translate\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.data-value]=\"option.value\"\n      (click)=\"onOptionClick(option)\">\n      @if (option.label && !option.icon) {\n        {{ option.label | translate }}\n      }\n    </span>\n  }\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSwitchComponent, isStandalone: true, selector: "core-generic-switch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"c-switch\" [attr.aria-label]=\"ariaLabel()\" role=\"group\">\n  @for (option of options(); track option.value) {\n  <button\n    class=\"c-icon-btn\"\n    [class]=\"option.icon || '' | coreIconCompat\"\n    [class.is-active]=\"isSelected(option.value)\"\n    [class.is-disabled]=\"option.disabled\"\n    [attr.title]=\"option.tooltip || option.label || '' | translate\"\n    [attr.aria-pressed]=\"isSelected(option.value)\"\n    [attr.aria-disabled]=\"option.disabled\"\n    [attr.data-value]=\"option.value\"\n    (click)=\"onOptionClick(option)\"\n  >\n    @if (option.label && !option.icon) {\n    {{ option.label | translate }}\n    }\n  </button>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-generic-switch', standalone: true, imports: [CommonModule, IconCompatPipe, TranslateModule], template: "<button \n  class=\"c-switch\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"group\">\n  @for (option of options(); track option.value) {\n    <span \n      class=\"c-icon-btn\"\n      [class]=\"option.icon || '' | coreIconCompat\"\n      [class.is-active]=\"isSelected(option.value)\"\n      [class.is-disabled]=\"option.disabled\"\n      [attr.title]=\"option.tooltip || option.label || '' | translate\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.data-value]=\"option.value\"\n      (click)=\"onOptionClick(option)\">\n      @if (option.label && !option.icon) {\n        {{ option.label | translate }}\n      }\n    </span>\n  }\n</button>\n" }]
+            args: [{ selector: 'core-generic-switch', standalone: true, imports: [CommonModule, IconCompatPipe, TranslateModule], template: "<div class=\"c-switch\" [attr.aria-label]=\"ariaLabel()\" role=\"group\">\n  @for (option of options(); track option.value) {\n  <button\n    class=\"c-icon-btn\"\n    [class]=\"option.icon || '' | coreIconCompat\"\n    [class.is-active]=\"isSelected(option.value)\"\n    [class.is-disabled]=\"option.disabled\"\n    [attr.title]=\"option.tooltip || option.label || '' | translate\"\n    [attr.aria-pressed]=\"isSelected(option.value)\"\n    [attr.aria-disabled]=\"option.disabled\"\n    [attr.data-value]=\"option.value\"\n    (click)=\"onOptionClick(option)\"\n  >\n    @if (option.label && !option.icon) {\n    {{ option.label | translate }}\n    }\n  </button>\n  }\n</div>" }]
+        }] });
+
+class MobileResolutionService {
+    DEFAULT_MOBILE_BREAKPOINT = 768;
+    DEFAULT_CHECK_INTERVAL = 200;
+    _isMobile = signal(false);
+    _screenWidth = signal(0);
+    _breakpoint = signal(this.DEFAULT_MOBILE_BREAKPOINT);
+    _isConfigured = signal(false);
+    resizeTimeout;
+    isMobile = this._isMobile.asReadonly();
+    screenWidth = this._screenWidth.asReadonly();
+    breakpoint = this._breakpoint.asReadonly();
+    isConfigured = this._isConfigured.asReadonly();
+    isXSmall = computed(() => this._screenWidth() < 576);
+    isSmall = computed(() => this._screenWidth() >= 576 && this._screenWidth() < 768);
+    isMedium = computed(() => this._screenWidth() >= 768 && this._screenWidth() < 992);
+    isLarge = computed(() => this._screenWidth() >= 992 && this._screenWidth() < 1200);
+    isXLarge = computed(() => this._screenWidth() >= 1200);
+    isXs = this.isXSmall;
+    isSm = this.isSmall;
+    isMd = this.isMedium;
+    isLg = this.isLarge;
+    isXl = this.isXLarge;
+    isMobileDevice = computed(() => this.isXSmall() || this.isSmall());
+    isTablet = this.isMedium;
+    isDesktop = computed(() => this.isLarge() || this.isXLarge());
+    constructor() {
+        if (typeof window !== 'undefined') {
+            this.initializeWithDefaults();
+        }
+    }
+    configure(config) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const breakpoint = config?.maxWidth || this.DEFAULT_MOBILE_BREAKPOINT;
+        const checkInterval = config?.checkInterval || this.DEFAULT_CHECK_INTERVAL;
+        this._breakpoint.set(breakpoint);
+        this._isConfigured.set(true);
+        this.updateScreenSize();
+        this.setupResizeListener(checkInterval);
+    }
+    initializeWithDefaults() {
+        if (this._isConfigured()) {
+            return;
+        }
+        this.configure({
+            maxWidth: this.DEFAULT_MOBILE_BREAKPOINT,
+            checkInterval: this.DEFAULT_CHECK_INTERVAL
+        });
+    }
+    updateScreenSize() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const width = window.innerWidth;
+        this._screenWidth.set(width);
+        this._isMobile.set(width <= this._breakpoint());
+    }
+    setupResizeListener(interval) {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.removeEventListener('resize', this.handleResize);
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    handleResize() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        this.resizeTimeout = setTimeout(() => {
+            this.updateScreenSize();
+        }, this.DEFAULT_CHECK_INTERVAL);
+    }
+    isWidthLessThan(width) {
+        return this._screenWidth() <= width;
+    }
+    isWidthGreaterThan(width) {
+        return this._screenWidth() > width;
+    }
+    isWidthBetween(min, max) {
+        const width = this._screenWidth();
+        return width >= min && width <= max;
+    }
+    getCurrentBreakpoint() {
+        if (this.isXSmall())
+            return 'xs';
+        if (this.isSmall())
+            return 'sm';
+        if (this.isMedium())
+            return 'md';
+        if (this.isLarge())
+            return 'lg';
+        return 'xl';
+    }
+    destroy() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileResolutionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class FixedActionsMobileModalService {
+    _isVisible = signal(false);
+    _modalData = signal(null);
+    isVisible = this._isVisible.asReadonly();
+    modalData = this._modalData.asReadonly();
+    open(data) {
+        this._modalData.set(data);
+        this._isVisible.set(true);
+    }
+    close() {
+        this._isVisible.set(false);
+        setTimeout(() => {
+            if (!this._isVisible()) {
+                this._modalData.set(null);
+            }
+        }, 300);
+    }
+    executeAction(action, row) {
+        if (action.callback) {
+            action.callback(row);
+        }
+        else if (action.customAction?.callback) {
+            action.customAction.callback(row);
+        }
+        else if (action.globalAction?.callback) {
+            const selectedRows = this._modalData()?.selectedRows || [];
+            action.globalAction.callback(selectedRows);
+        }
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class FixedActionsMobileModalComponent {
+    mobileModalService = inject(FixedActionsMobileModalService);
+    permissionService = inject(PermissionService);
+    isVisible = this.mobileModalService.isVisible;
+    modalData = this.mobileModalService.modalData;
+    visibleActions = computed(() => {
+        const data = this.modalData();
+        if (!data)
+            return [];
+        return data.actions.filter(action => this.shouldShowAction(action));
+    });
+    shouldShowAction(action) {
+        if (action.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        const data = this.modalData();
+        if (action.shouldShow && data?.data) {
+            return action.shouldShow(data.data);
+        }
+        if (action.customAction?.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.customAction.requiredPermission.resource, action.customAction.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        if (action.customAction?.shouldShow && data?.data) {
+            return action.customAction.shouldShow(data.data);
+        }
+        if (action.globalAction?.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.globalAction.requiredPermission.resource, action.globalAction.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        return true;
+    }
+    getActionLabel(action) {
+        return action.label || action.customAction?.label || action.globalAction?.label || '';
+    }
+    getActionIcon(action) {
+        return action.icon || action.customAction?.icon || action.globalAction?.icon || '';
+    }
+    onClose() {
+        this.mobileModalService.close();
+    }
+    onActionClick(action) {
+        const data = this.modalData();
+        this.mobileModalService.executeAction(action, data?.data);
+    }
+    onOverlayClick(event) {
+        if (event.target === event.currentTarget) {
+            this.onClose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FixedActionsMobileModalComponent, isStandalone: true, selector: "core-fixed-actions-mobile-modal", ngImport: i0, template: "@if (isVisible()) {\n  <div class=\"c-services-chat c-modal is-visible\">\n    <div class=\"c-modal__overlay\" (click)=\"onOverlayClick($event)\"></div>\n    <div class=\"c-modal__holder\">\n      <div class=\"c-modal__header\">\n        @if (modalData()?.title || modalData()?.subtitle) {\n          <p class=\"c-modal__title\">\n            {{ modalData()?.title }}\n            @if (modalData()?.subtitle) {\n              <br>\n              <small>{{ modalData()?.subtitle }}</small>\n            }\n          </p>\n        }\n        <button \n          type=\"button\" \n          class=\"c-icon-btn c-modal__close\" \n          aria-label=\"Cerrar\" \n          title=\"Cerrar\"\n          (click)=\"onClose()\">\n          <span class=\"icon-cross-thin\"></span>\n        </button>\n      </div>\n      <div class=\"c-modal__body\">\n        <nav class=\"c-mobile-nav\">\n          <ul>\n            @for (action of visibleActions(); track $index) {\n              <li class=\"c-mobile-nav__item\">\n                <a \n                  class=\"c-mobile-nav__link\" \n                  href=\"javascript:void(0)\"\n                  (click)=\"onActionClick(action)\">\n                  @if (getActionIcon(action)) {\n                    <span [ngClass]=\"getActionIcon(action)\"></span>\n                  }\n                  {{ getActionLabel(action) }}\n                </a>\n              </li>\n            }\n          </ul>\n        </nav>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FixedActionsMobileModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-fixed-actions-mobile-modal', standalone: true, imports: [CommonModule], template: "@if (isVisible()) {\n  <div class=\"c-services-chat c-modal is-visible\">\n    <div class=\"c-modal__overlay\" (click)=\"onOverlayClick($event)\"></div>\n    <div class=\"c-modal__holder\">\n      <div class=\"c-modal__header\">\n        @if (modalData()?.title || modalData()?.subtitle) {\n          <p class=\"c-modal__title\">\n            {{ modalData()?.title }}\n            @if (modalData()?.subtitle) {\n              <br>\n              <small>{{ modalData()?.subtitle }}</small>\n            }\n          </p>\n        }\n        <button \n          type=\"button\" \n          class=\"c-icon-btn c-modal__close\" \n          aria-label=\"Cerrar\" \n          title=\"Cerrar\"\n          (click)=\"onClose()\">\n          <span class=\"icon-cross-thin\"></span>\n        </button>\n      </div>\n      <div class=\"c-modal__body\">\n        <nav class=\"c-mobile-nav\">\n          <ul>\n            @for (action of visibleActions(); track $index) {\n              <li class=\"c-mobile-nav__item\">\n                <a \n                  class=\"c-mobile-nav__link\" \n                  href=\"javascript:void(0)\"\n                  (click)=\"onActionClick(action)\">\n                  @if (getActionIcon(action)) {\n                    <span [ngClass]=\"getActionIcon(action)\"></span>\n                  }\n                  {{ getActionLabel(action) }}\n                </a>\n              </li>\n            }\n          </ul>\n        </nav>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }] });
 
 class GenericTableComponent {
@@ -11741,6 +11965,8 @@ class GenericTableComponent {
     inlineEditService = inject((InlineEditService));
     tableSortService = inject(TableSortService);
     activeFiltersEventService = inject(ActiveFiltersEventService);
+    mobileResolutionService = inject(MobileResolutionService);
+    fixedActionsMobileModalService = inject(FixedActionsMobileModalService);
     TableAction = TableAction;
     ModalMode = ModalMode;
     ButtonType = ButtonType;
@@ -11783,6 +12009,7 @@ class GenericTableComponent {
     showManualRefresh = input(false);
     manualRefreshConfig = input(undefined);
     refreshButtonConfig = input(undefined);
+    fixedActionsConfig = input(undefined);
     customEdit = input();
     customDelete = input();
     customView = input();
@@ -11837,6 +12064,11 @@ class GenericTableComponent {
         return actions;
     });
     getVisibleCustomActions(row, isExtra = false) {
+        const config = this.fixedActionsConfig();
+        const isMobile = this.mobileResolutionService.isMobile();
+        if (!isExtra && config?.enabled && isMobile && config.includeCustomActions !== false) {
+            return [];
+        }
         const actions = this.customActions()
             .filter(action => action.isExtra === isExtra)
             .filter(action => {
@@ -11869,6 +12101,67 @@ class GenericTableComponent {
     });
     currentFilterValues = signal(new Map());
     currentActiveFilters = computed(() => this.generateActiveFilters());
+    shouldShowFixedActions = computed(() => {
+        const config = this.fixedActionsConfig();
+        if (!config?.enabled)
+            return false;
+        if (config.showOnlyInMobile !== false) {
+            return this.mobileResolutionService.isMobile();
+        }
+        return true;
+    });
+    shouldShowManualRefresh = computed(() => {
+        return this.showManualRefresh() && !this.mobileResolutionService.isMobile();
+    });
+    fixedActionsArray = computed(() => {
+        const config = this.fixedActionsConfig();
+        if (!config?.enabled || !this.shouldShowFixedActions())
+            return [];
+        const actions = [];
+        if (config.includeGlobalActions) {
+            const floatingGlobalActions = this.globalActions()
+                .filter(ga => !ga.showInsideModal)
+                .map(globalAction => ({
+                icon: globalAction.icon,
+                label: globalAction.label,
+                class: globalAction.class,
+                tooltip: globalAction.tooltip,
+                tooltipPosition: globalAction.tooltipPosition,
+                globalAction,
+                requiredPermission: globalAction.requiredPermission,
+                callback: () => {
+                    if (globalAction.callback) {
+                        globalAction.callback(this.selectedRows());
+                    }
+                }
+            }));
+            actions.push(...floatingGlobalActions);
+            const modalGlobalActions = this.globalActions().filter(ga => ga.showInsideModal);
+            if (modalGlobalActions.length > 0) {
+                const plusButtonAction = {
+                    icon: 'icon-add-clean',
+                    class: 'c-btn--primary',
+                    tooltip: 'Más acciones',
+                    insideActions: modalGlobalActions.map(globalAction => ({
+                        icon: globalAction.icon,
+                        label: globalAction.label,
+                        requiredPermission: globalAction.requiredPermission,
+                        globalAction: globalAction,
+                        callback: () => {
+                            if (globalAction.callback) {
+                                globalAction.callback(this.selectedRows());
+                            }
+                        }
+                    }))
+                };
+                actions.push(plusButtonAction);
+            }
+        }
+        if (config.customFixedActions) {
+            actions.push(...config.customFixedActions);
+        }
+        return actions;
+    });
     hasExtraActionsForRow(row) {
         const hasExtraDefaultActionsWithPermissions = this.getVisibleDefaultActions(row, true).some(action => this.hasPermission(action));
         const hasExtraCustomActionsWithPermissions = this.getVisibleCustomActions(row, true).some(action => this.hasPermission(action));
@@ -12348,6 +12641,165 @@ class GenericTableComponent {
         const maxSelection = action.maxSelection ?? Infinity;
         return selectionCount < minSelection || selectionCount > maxSelection;
     }
+    onFixedActionClick(action) {
+        const config = this.fixedActionsConfig();
+        if (!config)
+            return;
+        if (action.insideActions && action.insideActions.length > 0) {
+            this.openFixedActionsMobileModal(action);
+            return;
+        }
+        if (action.callback) {
+            action.callback();
+        }
+        else if (action.customAction?.callback) {
+            const selectedRow = this.selectedRows()[0];
+            if (selectedRow) {
+                action.customAction.callback(selectedRow);
+            }
+        }
+        else if (action.globalAction?.callback) {
+            action.globalAction.callback(this.selectedRows());
+        }
+    }
+    openFixedActionsMobileModal(action) {
+        const config = this.fixedActionsConfig();
+        if (!config || !action.insideActions)
+            return;
+        const selectedRow = this.selectedRows()[0];
+        const convertedActions = action.insideActions.map(innerAction => {
+            if ('callback' in innerAction && !('title' in innerAction) && !('requiresSelection' in innerAction)) {
+                return innerAction;
+            }
+            if ('title' in innerAction) {
+                const customAction = innerAction;
+                return {
+                    customAction,
+                    icon: customAction.icon,
+                    label: customAction.title,
+                    requiredPermission: customAction.requiredPermission,
+                    callback: (row) => {
+                        if (row) {
+                            customAction.callback(row);
+                        }
+                    }
+                };
+            }
+            const globalAction = innerAction;
+            return {
+                globalAction,
+                icon: globalAction.icon,
+                label: globalAction.label,
+                requiredPermission: globalAction.requiredPermission,
+                callback: () => {
+                    globalAction.callback(this.selectedRows());
+                }
+            };
+        });
+        this.fixedActionsMobileModalService.open({
+            title: config.mobileModalTitle,
+            subtitle: config.mobileModalSubtitle,
+            actions: convertedActions,
+            data: selectedRow,
+            selectedRows: this.selectedRows()
+        });
+    }
+    openCustomActionsMobileModal(row) {
+        const config = this.fixedActionsConfig();
+        if (!config)
+            return;
+        const visibleCustomActions = this.customActions().filter(customAction => {
+            if (customAction.shouldShow && !customAction.shouldShow(row)) {
+                return false;
+            }
+            if (customAction.requiredPermission) {
+                const hasPermission = this.permissionService.hasPermission(customAction.requiredPermission.resource, customAction.requiredPermission.action);
+                if (!hasPermission)
+                    return false;
+            }
+            return true;
+        });
+        const convertedActions = visibleCustomActions.map(customAction => ({
+            customAction,
+            icon: customAction.icon,
+            label: customAction.title,
+            requiredPermission: customAction.requiredPermission,
+            callback: () => {
+                customAction.callback(row);
+            }
+        }));
+        this.fixedActionsMobileModalService.open({
+            title: config.mobileModalTitle || 'Acciones',
+            subtitle: config.mobileModalSubtitle,
+            actions: convertedActions,
+            data: row,
+            selectedRows: [row]
+        });
+    }
+    shouldShowFixedAction(action) {
+        if (action.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.requiredPermission.resource, action.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        if (action.shouldShow) {
+            const selectedRow = this.selectedRows()[0];
+            return action.shouldShow(selectedRow);
+        }
+        if (action.customAction?.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.customAction.requiredPermission.resource, action.customAction.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        if (action.customAction?.shouldShow) {
+            const selectedRow = this.selectedRows()[0];
+            if (selectedRow) {
+                return action.customAction.shouldShow(selectedRow);
+            }
+        }
+        if (action.globalAction?.requiredPermission) {
+            const hasPermission = this.permissionService.hasPermission(action.globalAction.requiredPermission.resource, action.globalAction.requiredPermission.action);
+            if (!hasPermission)
+                return false;
+        }
+        return true;
+    }
+    isFixedActionDisabled(action) {
+        const selectedRow = this.selectedRows()[0];
+        if (action.shouldDisable) {
+            return action.shouldDisable(selectedRow);
+        }
+        if (action.customAction?.shouldDisable && selectedRow) {
+            return action.customAction.shouldDisable(selectedRow);
+        }
+        if (action.globalAction?.isDisabled) {
+            return action.globalAction.isDisabled;
+        }
+        if (action.globalAction) {
+            return this.isGlobalActionDisabled(action.globalAction);
+        }
+        return false;
+    }
+    getFixedActionClass(action) {
+        const classes = ['c-fixed-actions__btn', 'c-btn'];
+        if (action.class) {
+            classes.push(action.class);
+        }
+        else if (action.customAction?.class) {
+            classes.push(action.customAction.class);
+        }
+        else if (action.globalAction?.class) {
+            classes.push(action.globalAction.class);
+        }
+        const icon = action.icon || action.customAction?.icon || action.globalAction?.icon;
+        if (icon) {
+            classes.push(icon);
+        }
+        return classes.join(' ');
+    }
+    getFixedActionTooltip(action) {
+        return action.tooltip || action.customAction?.tooltip || action.globalAction?.tooltip;
+    }
     onModalSave(updatedData) {
         const modalMode = this.tableActionService.getModalMode();
         this.beforeSave.emit({ data: updatedData, mode: modalMode });
@@ -12848,6 +13300,7 @@ class GenericTableComponent {
             filterButtonConfig: this.filterButtonConfig(),
             createButtonConfig: this.createButtonConfig(),
             createButtonText: this.createButtonText(),
+            refreshCallback: this.showManualRefresh() ? () => this.onManualRefresh() : undefined
         });
     }
     onColumnHeaderClick(column) {
@@ -13116,6 +13569,15 @@ class GenericTableComponent {
         this.toggleRowExpansion(row);
     }
     onMoreActionsClick(event, rowId) {
+        const config = this.fixedActionsConfig();
+        const isMobile = this.mobileResolutionService.isMobile();
+        if (config?.enabled && isMobile && config.includeCustomActions !== false) {
+            const row = this.displayedData().find(r => r.getId() === rowId);
+            if (row) {
+                this.openCustomActionsMobileModal(row);
+                return;
+            }
+        }
         this.toggleSubmenu(rowId, event.originalEvent);
     }
     sortDataByReference() {
@@ -13278,7 +13740,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 }, 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 }, 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.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (showManualRefresh()) {\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) {\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            @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=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\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</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>", styles: [".expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\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"] }, { 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"] }] });
+    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 }, 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 }, 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.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) {\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            @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=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\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</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: [".expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\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"] }, { 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,
@@ -13294,7 +13756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         ActiveFiltersComponent,
                         CoreManualRefreshComponent,
                         GenericSwitchComponent,
-                    ], 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.in-modal]=\"inModal()\" [class.inline-edit-mode]=\"inlineEditService.isInlineEditMode()\">\n  @if (showManualRefresh()) {\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) {\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            @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=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\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</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>", styles: [".expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\n"] }]
+                        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.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) {\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            @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=\"expansion-row\" [ngClass]=\"getRowClasses(row)\">\n          <td [attr.colspan]=\"displayedColumns().length\" class=\"expansion-content\">\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</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: [".expansion-row .expansion-content{padding:16px;background-color:#f8f9fa;border-top:1px solid #dee2e6}.expansion-row td{border-bottom:none}@keyframes newItemHighlight{0%{background-color:#f8f9fa;border-left-color:#28a745}25%{background-color:#e9ecef}50%{background-color:#f8f9fa}75%{background-color:#e9ecef}to{background-color:transparent;border-left-color:transparent}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sentinel: [{
                 type: ViewChild,
                 args: ['sentinel', { static: false }]
@@ -14012,6 +14475,7 @@ class GenericSidebarComponent {
     alertService = inject(AlertService);
     mobileModalService = inject(SidebarMobileModalService);
     customModalService = inject(SidebarCustomModalService);
+    mobileResolutionService = inject(MobileResolutionService);
     config = input(null);
     position = input(SidebarPosition.LEFT);
     customTemplate = input(null);
@@ -14030,7 +14494,7 @@ class GenericSidebarComponent {
     isMobileView = computed(() => {
         const config = this.getConfig();
         const responsiveConfig = config?.responsiveConfig;
-        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? 980;
+        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? this.mobileResolutionService.breakpoint();
         const minBreakpoint = responsiveConfig?.minMobileBreakpoint ?? 0;
         return this.screenWidth() <= maxBreakpoint && this.screenWidth() >= minBreakpoint;
     });
@@ -14712,6 +15176,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ], 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) {\n          @if (headerService.isElementVisible(element.type)) {\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            \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"] }]
         }], ctorParameters: () => [] });
 
+class MobileHeaderComponent {
+    mobileResolutionService = inject(MobileResolutionService);
+    headerService = inject(HeaderService);
+    config = input.required();
+    menuClick = output();
+    refreshClick = output();
+    filterClick = output();
+    isMobile = this.mobileResolutionService.isMobile;
+    shouldShowRefreshButton = computed(() => {
+        const config = this.config();
+        if (config.showRefreshButton !== undefined) {
+            return config.showRefreshButton;
+        }
+        return !!this.headerService.getRefreshCallback()();
+    });
+    onMenuClick() {
+        this.menuClick.emit();
+    }
+    onRefreshClick() {
+        this.refreshClick.emit();
+    }
+    onFilterClick() {
+        this.filterClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MobileHeaderComponent, isStandalone: true, selector: "core-mobile-header", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick", refreshClick: "refreshClick", filterClick: "filterClick" }, ngImport: i0, template: "@if (isMobile()) {\n    <div class=\"c-header-mobile__holder\">\n      <div class=\"c-header-mobile__row\">\n        <div class=\"c-header-mobile__col\">\n          <p class=\"c-header-mobile__title\">{{ config().title | translate }}</p>\n        </div>\n        <div class=\"c-header-mobile__col\">\n          <button \n            type=\"button\" \n            class=\"c-header-mobile__menu icon-burger\"\n            [attr.aria-label]=\"'mobile-header.menu' | translate\"\n            (click)=\"onMenuClick()\">\n          </button>\n        </div>\n      </div>\n    </div>\n    \n    @if (shouldShowRefreshButton() || config().showFilterButton) {\n      <div class=\"c-header-mobile__subnav\" \n           [class.c-header-mobile__subnav--light]=\"config().lightSubnav !== false\">\n        <div class=\"u-flex u-flex--space-between\">\n          @if (shouldShowRefreshButton()) {\n            <button \n              type=\"button\"\n              class=\"c-btn c-btn--stroke c-btn--secondary\"\n              (click)=\"onRefreshClick()\">\n              <span class=\"icon-reload\"></span>\n              {{ (config().refreshButtonLabel || 'mobile-header.refresh') | translate }}\n            </button>\n          }\n          \n          @if (config().showFilterButton) {\n            <button \n              type=\"button\"\n              class=\"c-btn c-btn--stroke\"\n              (click)=\"onFilterClick()\">\n              <span class=\"icon-filter\"></span>\n              {{ (config().filterButtonLabel || 'mobile-header.filter') | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MobileHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-mobile-header', standalone: true, imports: [CommonModule, TranslateModule], template: "@if (isMobile()) {\n    <div class=\"c-header-mobile__holder\">\n      <div class=\"c-header-mobile__row\">\n        <div class=\"c-header-mobile__col\">\n          <p class=\"c-header-mobile__title\">{{ config().title | translate }}</p>\n        </div>\n        <div class=\"c-header-mobile__col\">\n          <button \n            type=\"button\" \n            class=\"c-header-mobile__menu icon-burger\"\n            [attr.aria-label]=\"'mobile-header.menu' | translate\"\n            (click)=\"onMenuClick()\">\n          </button>\n        </div>\n      </div>\n    </div>\n    \n    @if (shouldShowRefreshButton() || config().showFilterButton) {\n      <div class=\"c-header-mobile__subnav\" \n           [class.c-header-mobile__subnav--light]=\"config().lightSubnav !== false\">\n        <div class=\"u-flex u-flex--space-between\">\n          @if (shouldShowRefreshButton()) {\n            <button \n              type=\"button\"\n              class=\"c-btn c-btn--stroke c-btn--secondary\"\n              (click)=\"onRefreshClick()\">\n              <span class=\"icon-reload\"></span>\n              {{ (config().refreshButtonLabel || 'mobile-header.refresh') | translate }}\n            </button>\n          }\n          \n          @if (config().showFilterButton) {\n            <button \n              type=\"button\"\n              class=\"c-btn c-btn--stroke\"\n              (click)=\"onFilterClick()\">\n              <span class=\"icon-filter\"></span>\n              {{ (config().filterButtonLabel || 'mobile-header.filter') | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n}\n" }]
+        }] });
+
 var PermissionsActions;
 (function (PermissionsActions) {
     PermissionsActions["WRITE"] = "W";
@@ -14786,12 +15282,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.15.0',
+    full: '2.15.1',
     major: 2,
     minor: 15,
-    patch: 0,
-    timestamp: '2025-10-07T17:43:16.025Z',
-    buildDate: '7/10/2025'
+    patch: 1,
+    timestamp: '2025-10-10T15:08:54.566Z',
+    buildDate: '10/10/2025'
 };
 
 class MainNavComponent {
@@ -14799,6 +15295,7 @@ class MainNavComponent {
     mainNavService = inject(MainNavService);
     authService = inject(AuthService);
     router = inject(Router);
+    mobileResolutionService = inject(MobileResolutionService);
     isCollapsed = false;
     isMobile = false;
     isBottomNavOpen = false;
@@ -15016,6 +15513,22 @@ class MainNavComponent {
             }
         }
     }
+    toggleMobileNav() {
+        if (!this.isMobile)
+            return;
+        this.isBottomNavOpen = !this.isBottomNavOpen;
+        if (this.isBottomNavOpen) {
+            document.body.classList.add('bottom-nav-open');
+            document.documentElement.classList.add('nav-expanded');
+        }
+        else {
+            document.body.classList.add('bottom-nav-closing');
+            setTimeout(() => {
+                document.body.classList.remove('bottom-nav-open');
+                document.body.classList.remove('bottom-nav-closing');
+            }, 700);
+        }
+    }
     onBottomNavItemClick(item) {
         if (item.disabled)
             return;
@@ -15049,7 +15562,7 @@ class MainNavComponent {
         return classes;
     }
     checkIfMobile() {
-        this.isMobile = window.innerWidth <= 980;
+        this.isMobile = window.innerWidth <= this.mobileResolutionService.breakpoint();
     }
     setupResizeListener() {
         window.addEventListener('resize', this.onResize.bind(this));
@@ -15070,11 +15583,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" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleBottomNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n\n    <!-- Toggle btn -->\n    <button (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\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 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 class=\"c-mn-brand__logo\" \n              [src]=\"getExpandedLogoSrc()\" \n              [width]=\"getExpandedLogoSettings().width\" \n              [height]=\"getExpandedLogoSettings().height\" \n              [alt]=\"getExpandedLogoSettings().alt\">\n        }\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n              <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n                *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n                >\n                \n                <button class=\"c-mn-nav__link\"\n                  [ngClass]=\"{'is-active': isParentActive(item)}\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\">\n                  <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></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\n                    <ng-container *ngFor=\"let child of item.children; let j = index\">\n                      <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n                          <li class=\"c-mn-nav__subitem\">\n                             <button class=\"c-mn-nav__sublink\"\n                                [routerLink]=\"child.disabled ? null : child.path\" \n                                routerLinkActive=\"is-active\"\n                                 [routerLinkActiveOptions]=\"{ exact: false }\" \n                                 [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                                 [ngClass]=\"{'is-disabled': child.disabled}\"\n                                 [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\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                          \n                          <li class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                            >\n                            <button class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{'is-active': isParentActive(child)}\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                              >\n                                {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n\n                                <ng-container *ngFor=\"let subItem of child.children\">\n                                  <li class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n                                    >\n                                    <button 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\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n            </li>\n\n              <ng-template #singleLink>\n\n                <li class=\"c-mn-nav__item\">\n                  <button 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 class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n                    <span class=\"c-mn-nav__text\">\n                      {{ item.label | translate }}\n                    </span>\n                  </button>\n                </li>\n              </ng-template>\n\n\n            </ng-container>\n          </ng-container>\n        </ng-template>\n                \n        <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n      </ul>\n    </nav> <!-- .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 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\">\n              v{{ appVersion().full }}\n          </li>\n        }\n      </ul>\n    </nav>\n\n  </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n<nav class=\"c-bottom-nav\">\n  <h2 class=\"u-hidden\"></h2>\n  <ul class=\"c-bottom-nav__list\">\n    <ng-container *ngFor=\"let item of bottomNavItems().slice(0, 2); let i = index\">\n      <li class=\"c-bottom-nav__item\"\n          [ngClass]=\"{\n            'is-active': item.isActive,\n            'c-bottom-nav__item--highlighted': item.isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(item)\"\n                [disabled]=\"item.disabled\"\n                (click)=\"onBottomNavItemClick(item)\">\n        </button>\n      </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"bottomNavItems().length > 2\">\n      <li class=\"c-bottom-nav__item c-bottom-nav__item--center\"\n          [ngClass]=\"{\n            'is-active': bottomNavItems()[2].isActive,\n            'c-bottom-nav__item--highlighted': bottomNavItems()[2].isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(bottomNavItems()[2])\"\n                [disabled]=\"bottomNavItems()[2].disabled\"\n                (click)=\"toggleBottomNav()\">\n        </button>\n      </li>\n    </ng-container>\n\n    <ng-container *ngFor=\"let item of bottomNavItems().slice(3, 5); let i = index\">\n      <li class=\"c-bottom-nav__item\"\n          [ngClass]=\"{\n            'is-active': item.isActive,\n            'c-bottom-nav__item--highlighted': item.isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(item)\"\n                [disabled]=\"item.disabled\"\n                (click)=\"onBottomNavItemClick(item)\">\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</nav>", 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" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n\n    <!-- Toggle btn -->\n    <button (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\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 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 class=\"c-mn-brand__logo\" \n              [src]=\"getExpandedLogoSrc()\" \n              [width]=\"getExpandedLogoSettings().width\" \n              [height]=\"getExpandedLogoSettings().height\" \n              [alt]=\"getExpandedLogoSettings().alt\">\n        }\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n              <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n                *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n                >\n                \n                <button class=\"c-mn-nav__link\"\n                  [ngClass]=\"{'is-active': isParentActive(item)}\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\">\n                  <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></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\n                    <ng-container *ngFor=\"let child of item.children; let j = index\">\n                      <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n                          <li class=\"c-mn-nav__subitem\">\n                             <button class=\"c-mn-nav__sublink\"\n                                [routerLink]=\"child.disabled ? null : child.path\" \n                                routerLinkActive=\"is-active\"\n                                 [routerLinkActiveOptions]=\"{ exact: false }\" \n                                 [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                                 [ngClass]=\"{'is-disabled': child.disabled}\"\n                                 [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\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                          \n                          <li class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                            >\n                            <button class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{'is-active': isParentActive(child)}\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                              >\n                                {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n\n                                <ng-container *ngFor=\"let subItem of child.children\">\n                                  <li class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n                                    >\n                                    <button 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\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n            </li>\n\n              <ng-template #singleLink>\n\n                <li class=\"c-mn-nav__item\">\n                  <button 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 class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n                    <span class=\"c-mn-nav__text\">\n                      {{ item.label | translate }}\n                    </span>\n                  </button>\n                </li>\n              </ng-template>\n\n\n            </ng-container>\n          </ng-container>\n        </ng-template>\n                \n        <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n      </ul>\n    </nav> <!-- .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 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\">\n              v{{ appVersion().full }}\n          </li>\n        }\n      </ul>\n    </nav>\n\n  </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\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: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleBottomNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n\n    <!-- Toggle btn -->\n    <button (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\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 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 class=\"c-mn-brand__logo\" \n              [src]=\"getExpandedLogoSrc()\" \n              [width]=\"getExpandedLogoSettings().width\" \n              [height]=\"getExpandedLogoSettings().height\" \n              [alt]=\"getExpandedLogoSettings().alt\">\n        }\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n              <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n                *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n                >\n                \n                <button class=\"c-mn-nav__link\"\n                  [ngClass]=\"{'is-active': isParentActive(item)}\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\">\n                  <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></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\n                    <ng-container *ngFor=\"let child of item.children; let j = index\">\n                      <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n                          <li class=\"c-mn-nav__subitem\">\n                             <button class=\"c-mn-nav__sublink\"\n                                [routerLink]=\"child.disabled ? null : child.path\" \n                                routerLinkActive=\"is-active\"\n                                 [routerLinkActiveOptions]=\"{ exact: false }\" \n                                 [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                                 [ngClass]=\"{'is-disabled': child.disabled}\"\n                                 [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\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                          \n                          <li class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                            >\n                            <button class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{'is-active': isParentActive(child)}\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                              >\n                                {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n\n                                <ng-container *ngFor=\"let subItem of child.children\">\n                                  <li class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n                                    >\n                                    <button 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\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n            </li>\n\n              <ng-template #singleLink>\n\n                <li class=\"c-mn-nav__item\">\n                  <button 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 class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n                    <span class=\"c-mn-nav__text\">\n                      {{ item.label | translate }}\n                    </span>\n                  </button>\n                </li>\n              </ng-template>\n\n\n            </ng-container>\n          </ng-container>\n        </ng-template>\n                \n        <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n      </ul>\n    </nav> <!-- .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 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\">\n              v{{ appVersion().full }}\n          </li>\n        }\n      </ul>\n    </nav>\n\n  </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n<nav class=\"c-bottom-nav\">\n  <h2 class=\"u-hidden\"></h2>\n  <ul class=\"c-bottom-nav__list\">\n    <ng-container *ngFor=\"let item of bottomNavItems().slice(0, 2); let i = index\">\n      <li class=\"c-bottom-nav__item\"\n          [ngClass]=\"{\n            'is-active': item.isActive,\n            'c-bottom-nav__item--highlighted': item.isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(item)\"\n                [disabled]=\"item.disabled\"\n                (click)=\"onBottomNavItemClick(item)\">\n        </button>\n      </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"bottomNavItems().length > 2\">\n      <li class=\"c-bottom-nav__item c-bottom-nav__item--center\"\n          [ngClass]=\"{\n            'is-active': bottomNavItems()[2].isActive,\n            'c-bottom-nav__item--highlighted': bottomNavItems()[2].isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(bottomNavItems()[2])\"\n                [disabled]=\"bottomNavItems()[2].disabled\"\n                (click)=\"toggleBottomNav()\">\n        </button>\n      </li>\n    </ng-container>\n\n    <ng-container *ngFor=\"let item of bottomNavItems().slice(3, 5); let i = index\">\n      <li class=\"c-bottom-nav__item\"\n          [ngClass]=\"{\n            'is-active': item.isActive,\n            'c-bottom-nav__item--highlighted': item.isHighlighted\n          }\">\n        <button type=\"button\" \n                [ngClass]=\"getBottomNavClasses(item)\"\n                [disabled]=\"item.disabled\"\n                (click)=\"onBottomNavItemClick(item)\">\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</nav>" }]
+            args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n\n    <!-- Toggle btn -->\n    <button (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\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 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 class=\"c-mn-brand__logo\" \n              [src]=\"getExpandedLogoSrc()\" \n              [width]=\"getExpandedLogoSettings().width\" \n              [height]=\"getExpandedLogoSettings().height\" \n              [alt]=\"getExpandedLogoSettings().alt\">\n        }\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n              <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n                *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n                >\n                \n                <button class=\"c-mn-nav__link\"\n                  [ngClass]=\"{'is-active': isParentActive(item)}\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\">\n                  <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></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\n                    <ng-container *ngFor=\"let child of item.children; let j = index\">\n                      <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n                          <li class=\"c-mn-nav__subitem\">\n                             <button class=\"c-mn-nav__sublink\"\n                                [routerLink]=\"child.disabled ? null : child.path\" \n                                routerLinkActive=\"is-active\"\n                                 [routerLinkActiveOptions]=\"{ exact: false }\" \n                                 [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                                 [ngClass]=\"{'is-disabled': child.disabled}\"\n                                 [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\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                          \n                          <li class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                            >\n                            <button class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{'is-active': isParentActive(child)}\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"isCollapsed ? (child.label | translate) : ''\"\n                              >\n                                {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n\n                                <ng-container *ngFor=\"let subItem of child.children\">\n                                  <li class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n                                    >\n                                    <button 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\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n            </li>\n\n              <ng-template #singleLink>\n\n                <li class=\"c-mn-nav__item\">\n                  <button 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 class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n                    <span class=\"c-mn-nav__text\">\n                      {{ item.label | translate }}\n                    </span>\n                  </button>\n                </li>\n              </ng-template>\n\n\n            </ng-container>\n          </ng-container>\n        </ng-template>\n                \n        <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n      </ul>\n    </nav> <!-- .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 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\">\n              v{{ appVersion().full }}\n          </li>\n        }\n      </ul>\n    </nav>\n\n  </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n" }]
         }], ctorParameters: () => [] });
 
 class LayoutStateService {
@@ -15544,7 +16057,10 @@ class LayoutComponent {
     expandedLogo = input('');
     logoImagesConfig = input(null);
     navConfig = input({});
+    mobileHeaderConfig = input(null);
     onLogout = output();
+    onMobileRefresh = output();
+    onMobileFilter = output();
     dialogService = inject(ConfirmationDialogService);
     mainNavService = inject(MainNavService);
     layoutService = inject(LayoutService);
@@ -15552,12 +16068,15 @@ class LayoutComponent {
     sidebarMobileModalService = inject(SidebarMobileModalService);
     templateRegistry = inject(SidebarTemplateRegistryService);
     headerService = inject(HeaderService);
+    mobileResolutionService = inject(MobileResolutionService);
     SidebarVisibility = SidebarVisibility;
     ModalMode = ModalMode;
     SidebarMobileType = SidebarMobileType;
     screenWidth = signal(typeof window !== 'undefined' ? window.innerWidth : 1024);
     isSidebarCollapsed = false;
     isHeaderVisible = false;
+    isMobile = this.mobileResolutionService.isMobile;
+    mainNavComponent;
     get leftSidebarConfig() {
         return this.layoutStateService.getLeftSidebarConfig()();
     }
@@ -15583,7 +16102,7 @@ class LayoutComponent {
     }
     isMobileView(config) {
         const responsiveConfig = config?.responsiveConfig;
-        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? 768;
+        const maxBreakpoint = responsiveConfig?.maxMobileBreakpoint ?? this.mobileResolutionService.breakpoint();
         const minBreakpoint = responsiveConfig?.minMobileBreakpoint ?? 0;
         return this.screenWidth() <= maxBreakpoint && this.screenWidth() >= minBreakpoint;
     }
@@ -15663,6 +16182,21 @@ class LayoutComponent {
         const event = new CustomEvent('globalActionTriggered', { detail: action });
         window.dispatchEvent(event);
     }
+    onMobileMenuClick() {
+        this.mainNavComponent?.toggleMobileNav();
+    }
+    onMobileRefreshClick() {
+        const refreshCallback = this.headerService.getRefreshCallback()();
+        if (refreshCallback) {
+            refreshCallback();
+        }
+        this.onMobileRefresh.emit();
+    }
+    onMobileFilterClick() {
+        const event = new CustomEvent('filterRequested');
+        window.dispatchEvent(event);
+        this.onMobileFilter.emit();
+    }
     setLeftSidebarConfig(config) {
         this.layoutStateService.setLeftSidebarConfig(config);
     }
@@ -15713,13 +16247,14 @@ class LayoutComponent {
         this.onLogout.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", 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 }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, host: { listeners: { "window:resize": "onResize($event)" } }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { 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: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", 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 }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, mobileHeaderConfig: { classPropertyName: "mobileHeaderConfig", publicName: "mobileHeaderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onMobileRefresh: "onMobileRefresh", onMobileFilter: "onMobileFilter" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mainNavComponent", first: true, predicate: MainNavComponent, descendants: true }], hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(isMobile() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!isMobile()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->", dependencies: [{ kind: "component", type: MainNavComponent, selector: "core-main-nav", inputs: ["navConfig", "appVersion", "navItems", "bottomNavItems", "isProduction", "logoImagesConfig", "collapsedLogo", "expandedLogo"], outputs: ["onLogout"] }, { kind: "component", type: HeaderComponent, selector: "core-header", outputs: ["filterRequested", "createRequested", "globalActionTriggered"] }, { kind: "component", type: MobileHeaderComponent, selector: "core-mobile-header", inputs: ["config"], outputs: ["menuClick", "refreshClick", "filterClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: ConfirmationDialogComponent, selector: "core-confirmation-dialog", inputs: ["isOpen", "config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: GenericSidebarComponent, selector: "core-generic-sidebar", inputs: ["config", "position", "customTemplate"], outputs: ["itemClicked", "subItemClicked"] }, { 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: ImageModalComponent, selector: "core-image-modal", outputs: ["modalClosed"] }, { kind: "component", type: GalleryModalComponent, selector: "core-gallery-modal" }, { kind: "component", type: SidebarCustomModalComponent, selector: "core-sidebar-custom-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'core-layout', imports: [
                         MainNavComponent,
                         HeaderComponent,
+                        MobileHeaderComponent,
                         CommonModule,
                         ConfirmationDialogComponent,
                         GenericSidebarComponent,
@@ -15727,8 +16262,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         ImageModalComponent,
                         GalleryModalComponent,
                         SidebarCustomModalComponent
-                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(layoutStateService.isHeaderVisible$() | async) {\n      <core-header\n        [class]=\"getHeaderClasses()\"\n        (filterRequested)=\"onFilterRequested()\"\n        (createRequested)=\"onCreateRequested()\"\n        (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n      </core-header>\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->" }]
-        }], propDecorators: { onResize: [{
+                    ], hostDirectives: [CoreHostDirective], template: "<div class=\"o-layout\" \n  [attr.data-layout]=\"layoutService.dataAttributes()['data-layout']\"\n  [attr.data-sidebar-left]=\"getEffectiveLeftSidebarVisibility()\"\n  [attr.data-sidebar-left-w]=\"getEffectiveLeftSidebarWidth()\"\n  [attr.data-sidebar-left-h]=\"getEffectiveLeftSidebarHeight()\"\n  [attr.data-sidebar-right]=\"getEffectiveRightSidebarVisibility()\"\n  [attr.data-sidebar-right-w]=\"getEffectiveRightSidebarWidth()\"\n  [attr.data-sidebar-right-h]=\"getEffectiveRightSidebarHeight()\"\n  >\n\n  <!-- Nav -->\n  <core-main-nav class=\"o-layout__nav\" \n    (toggleSidebar)=\"toggleSidebar()\"\n    [navItems]=\"navItems()\"\n    [navConfig]=\"navConfig()\"\n    [bottomNavItems]=\"bottomNavItems()\"\n    [logoImagesConfig]=\"logoImagesConfig()\"\n    [collapsedLogo]=\"collapsedLogo()\"\n    [expandedLogo]=\"expandedLogo()\"\n    (onLogout)=\"logout()\"\n    >\n  </core-main-nav>\n\n  <!-- Main -->\n  <div class=\"o-layout__body\">\n    \n    @if(isMobile() && mobileHeaderConfig()) {\n      <core-mobile-header\n        class=\"o-layout__header c-header-mobile\"\n        [config]=\"mobileHeaderConfig()!\"\n        (menuClick)=\"onMobileMenuClick()\"\n        (refreshClick)=\"onMobileRefreshClick()\"\n        (filterClick)=\"onMobileFilterClick()\">\n      </core-mobile-header>\n    }\n\n    @if(layoutStateService.isHeaderVisible$() | async) {\n      @if(!isMobile()) {\n        <core-header\n          [class]=\"getHeaderClasses()\"\n          (filterRequested)=\"onFilterRequested()\"\n          (createRequested)=\"onCreateRequested()\"\n          (globalActionTriggered)=\"onGlobalActionTriggered($event)\">\n        </core-header>\n      }\n    }\n\n    @if(layoutService.sidebarLeft().visibility === SidebarVisibility.SHOW && leftSidebarConfig && shouldRenderLeftSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--left\"\n        [config]=\"leftSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n    <ng-content></ng-content>\n\n    @if(layoutService.sidebarRight().visibility === SidebarVisibility.SHOW && rightSidebarConfig && shouldRenderRightSidebar()) {\n      <core-generic-sidebar \n        class=\"o-layout__sidebar--right\"\n        [config]=\"rightSidebarConfig\">\n      </core-generic-sidebar>\n    }\n\n\n    @if(dialogService.isOpen$()) {\n      <core-confirmation-dialog\n        [isOpen]=\"dialogService.isOpen$()\"\n        [config]=\"dialogService.config$()\"\n        (confirm)=\"dialogService.confirm($event)\"\n        (cancel)=\"dialogService.cancel()\"\n      ></core-confirmation-dialog>\n    }\n\n    @if(sidebarMobileModalService.isOpen()) {\n      <core-generic-modal\n        [isOpen]=\"sidebarMobileModalService.isOpen()\"\n        [mode]=\"ModalMode.CREATE\"\n        [title]=\"getSidebarModalTitle()\"\n        [customTemplate]=\"sidebarModalContentTemplate\"\n        (close)=\"sidebarMobileModalService.closeModal()\"\n        [buttonConfig]=\"getSidebarModalButtons()\">\n      </core-generic-modal>\n    }\n\n  </div> <!-- .o-layout__body -->\n</div> <!-- .o-layout -->\n\n<!-- Sidebar Custom Modal Global -->\n<core-sidebar-custom-modal></core-sidebar-custom-modal>\n\n<!-- Image Modal Global -->\n<core-image-modal></core-image-modal>\n\n<!-- Gallery Modal Global -->\n<core-gallery-modal></core-gallery-modal>\n\n<!-- ! Refactor: End -->" }]
+        }], propDecorators: { mainNavComponent: [{
+                type: ViewChild,
+                args: [MainNavComponent]
+            }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
@@ -17972,6 +18510,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             args: [{ selector: 'core-generic-gallery', standalone: true, imports: [CommonModule, GenericSkeletonComponent], providers: [], template: "<div [class]=\"containerClasses()\" \n     [ngStyle]=\"containerStyles()\">\n  \n  @if (finalConfig().layoutType === 'main-left') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-right') {\n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    \n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n  \n  @if (finalConfig().layoutType === 'main-top') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Main image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    \n    @if (thumbnailImages().length > 0) {\n      <div class=\"c-gallery-grid__imgs-xs\">\n        @for (image of thumbnailImages(); track image.id || $index; let i = $index) {\n          <div class=\"c-gallery-grid__img\" \n               [class.c-gallery-grid__img--loading]=\"isImageLoading(image, i + 1)\"\n               [class.c-gallery-grid__img--error]=\"hasImageError(image, i + 1)\">\n            \n            @if (isImageLoading(image, i + 1)) {\n              <div class=\"c-gallery-grid__skeleton\">\n                <core-generic-skeleton \n                  [type]=\"SkeletonType.IMAGE\"\n                  width=\"100%\"\n                  height=\"100%\"\n                  [animation]=\"SkeletonAnimation.SHIMMER\"\n                  [ariaLabel]=\"'Loading thumbnail: ' + (image.alt || 'Thumbnail')\">\n                </core-generic-skeleton>\n              </div>\n            }\n            \n            @if (!isImageLoading(image, i + 1) && !hasImageError(image, i + 1)) {\n              <img\n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                [title]=\"image.title || ''\"\n                [loading]=\"getImageLoading(false)\"\n                (click)=\"onImageClick(image, i + 1)\">\n            }\n            \n            @if (isImageLoading(image, i + 1)) {\n              <img \n                [src]=\"image.thumbnail || image.src\"\n                [alt]=\"image.alt || ''\"\n                style=\"display: none;\"\n                (load)=\"onImageLoad(image, i + 1)\"\n                (error)=\"onImageError(image, i + 1)\">\n            }\n            \n            @if (hasImageError(image, i + 1)) {\n              <div class=\"c-gallery-grid__error\">\n                <div class=\"c-gallery-grid__error-content\">\n                  <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n                  <span class=\"c-gallery-grid__error-text\">Error</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (finalConfig().layoutType === 'single') {\n    @if (mainImage()) {\n      <div class=\"c-gallery-grid__img\" \n           [class.c-gallery-grid__img--loading]=\"isImageLoading(mainImage()!, 0)\"\n           [class.c-gallery-grid__img--error]=\"hasImageError(mainImage()!, 0)\">\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__skeleton\">\n            <core-generic-skeleton \n              [type]=\"SkeletonType.IMAGE\"\n              width=\"100%\"\n              height=\"100%\"\n              [animation]=\"SkeletonAnimation.SHIMMER\"\n              [ariaLabel]=\"'Loading image: ' + (mainImage()!.alt || 'Single image')\">\n            </core-generic-skeleton>\n          </div>\n        }\n        \n        @if (!isImageLoading(mainImage()!, 0) && !hasImageError(mainImage()!, 0)) {\n          <img\n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            [title]=\"mainImage()!.title || ''\"\n            [loading]=\"getImageLoading(true)\"\n            (click)=\"onImageClick(mainImage()!, 0)\">\n        }\n        \n        @if (isImageLoading(mainImage()!, 0)) {\n          <img \n            [src]=\"mainImage()!.src\"\n            [alt]=\"mainImage()!.alt || ''\"\n            style=\"display: none;\"\n            (load)=\"onImageLoad(mainImage()!, 0)\"\n            (error)=\"onImageError(mainImage()!, 0)\">\n        }\n        \n        @if (hasImageError(mainImage()!, 0)) {\n          <div class=\"c-gallery-grid__error\">\n            <div class=\"c-gallery-grid__error-content\">\n              <span class=\"c-gallery-grid__error-icon\">\uD83D\uDCF7</span>\n              <span class=\"c-gallery-grid__error-text\">Error al cargar imagen</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
+var FixedActionPosition;
+(function (FixedActionPosition) {
+    FixedActionPosition["LEFT"] = "left";
+    FixedActionPosition["RIGHT"] = "right";
+    FixedActionPosition["CENTER"] = "center";
+})(FixedActionPosition || (FixedActionPosition = {}));
+
 class CacheBustingInterceptor {
     intercept(req, next) {
         if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
@@ -18253,5 +18798,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_COUNTRY_CODES, ActiveFiltersComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_COUNTRIES, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ManualRefreshService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
+export { ALL_COUNTRY_CODES, ActiveFiltersComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_COUNTRIES, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, FixedActionPosition, FixedActionsMobileModalComponent, FixedActionsMobileModalService, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ManualRefreshService, MobileHeaderComponent, MobileResolutionService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map