@solcre-org/core-ui 2.20.4 → 2.20.5

package/assets/css/inc/components/main-nav.nav.css

@@ -30,6 +30,11 @@
     opacity: .8;
 }
 
+.c-mn-user__optional-text {
+    font-size: 0.75em;
+    opacity: .5;
+}
+
 .c-mn-user__nav-close {
     display: none;
 }

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

@@ -16954,11 +16954,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.20.4',
+    full: '2.20.5',
     major: 2,
     minor: 20,
-    patch: 4,
-    timestamp: '2026-01-29T16:09:53.001Z',
+    patch: 5,
+    timestamp: '2026-01-29T16:28:31.585Z',
     buildDate: '29/1/2026'
 };
 
@@ -17347,11 +17347,11 @@ class MainNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onNavItemAction: "onNavItemAction" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if(navConfig().showLogo !== false) {\n    <div class=\"c-main-nav__brand c-mn-brand\">\n      @if(getCollapsedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__iso\"\n        [src]=\"getCollapsedLogoSrc()\"\n        [width]=\"getCollapsedLogoSettings().width\"\n        [height]=\"getCollapsedLogoSettings().height\"\n        [alt]=\"getCollapsedLogoSettings().alt\"\n      />\n      } @if(getExpandedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__logo\"\n        [src]=\"getExpandedLogoSrc()\"\n        [width]=\"getExpandedLogoSettings().width\"\n        [height]=\"getExpandedLogoSettings().height\"\n        [alt]=\"getExpandedLogoSettings().alt\"\n      />\n      }\n    </div>\n    }\n\n    <!-- User -->\n    @if(shouldShowUserSection()) {\n    <div class=\"c-main-nav__user c-mn-user\">\n      <div class=\"c-mn-user__short c-mn-user__nav-close\">\n        <span>{{ getUserInitials() }}</span>\n      </div>\n      <div class=\"c-mn-user__nav-open\">\n        <p class=\"c-mn-user__welcome\">\n          @if(userConfig?.greetingKey) {\n          {{ userConfig?.greetingKey ?? \"\" | translate }}\n          } @else if(userConfig?.greetingText) {\n          {{ userConfig?.greetingText }}\n          } @else { Bienvenido/a, }\n        </p>\n        <p class=\"c-mn-user__name\">\n          @if(userConfig?.nameKey) {\n          {{ userConfig?.nameKey ?? \"\" | translate }}\n          } @else if(userConfig?.name) {\n          {{ userConfig?.name }}\n          } @else {\n          {{ getFallbackUserName() }}\n          }\n        </p>\n      </div>\n    </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level)\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if(navConfig().showVersion !== false) {\n        <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout", onNavItemAction: "onNavItemAction" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if (navConfig().showLogo !== false) {\n      <div class=\"c-main-nav__brand c-mn-brand\">\n        @if (getCollapsedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__iso\"\n            [src]=\"getCollapsedLogoSrc()\"\n            [width]=\"getCollapsedLogoSettings().width\"\n            [height]=\"getCollapsedLogoSettings().height\"\n            [alt]=\"getCollapsedLogoSettings().alt\"\n          />\n        }\n        @if (getExpandedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__logo\"\n            [src]=\"getExpandedLogoSrc()\"\n            [width]=\"getExpandedLogoSettings().width\"\n            [height]=\"getExpandedLogoSettings().height\"\n            [alt]=\"getExpandedLogoSettings().alt\"\n          />\n        }\n      </div>\n    }\n\n    <!-- User -->\n    @if (shouldShowUserSection()) {\n      <div class=\"c-main-nav__user c-mn-user\">\n        <div class=\"c-mn-user__short c-mn-user__nav-close\">\n          <span>{{ getUserInitials() }}</span>\n        </div>\n        <div class=\"c-mn-user__nav-open\">\n          <p class=\"c-mn-user__welcome\">\n            @if (userConfig?.greetingKey) {\n              {{ userConfig?.greetingKey ?? \"\" | translate }}\n            } @else if (userConfig?.greetingText) {\n              {{ userConfig?.greetingText }}\n            } @else {\n              Bienvenido/a,\n            }\n          </p>\n          @if (userConfig?.optionalText) {\n            <p class=\"c-mn-user__optional-text\">\n              {{ userConfig?.optionalText ?? \"\" | translate }}\n            </p>\n          }\n          <p class=\"c-mn-user__name\">\n            @if (userConfig?.nameKey) {\n              {{ userConfig?.nameKey ?? \"\" | translate }}\n            } @else if (userConfig?.name) {\n              {{ userConfig?.name }}\n            } @else {\n              {{ getFallbackUserName() }}\n            }\n          </p>\n        </div>\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level),\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed,\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if (navConfig().showVersion !== false) {\n          <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if(navConfig().showLogo !== false) {\n    <div class=\"c-main-nav__brand c-mn-brand\">\n      @if(getCollapsedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__iso\"\n        [src]=\"getCollapsedLogoSrc()\"\n        [width]=\"getCollapsedLogoSettings().width\"\n        [height]=\"getCollapsedLogoSettings().height\"\n        [alt]=\"getCollapsedLogoSettings().alt\"\n      />\n      } @if(getExpandedLogoSrc()) {\n      <img\n        class=\"c-mn-brand__logo\"\n        [src]=\"getExpandedLogoSrc()\"\n        [width]=\"getExpandedLogoSettings().width\"\n        [height]=\"getExpandedLogoSettings().height\"\n        [alt]=\"getExpandedLogoSettings().alt\"\n      />\n      }\n    </div>\n    }\n\n    <!-- User -->\n    @if(shouldShowUserSection()) {\n    <div class=\"c-main-nav__user c-mn-user\">\n      <div class=\"c-mn-user__short c-mn-user__nav-close\">\n        <span>{{ getUserInitials() }}</span>\n      </div>\n      <div class=\"c-mn-user__nav-open\">\n        <p class=\"c-mn-user__welcome\">\n          @if(userConfig?.greetingKey) {\n          {{ userConfig?.greetingKey ?? \"\" | translate }}\n          } @else if(userConfig?.greetingText) {\n          {{ userConfig?.greetingText }}\n          } @else { Bienvenido/a, }\n        </p>\n        <p class=\"c-mn-user__name\">\n          @if(userConfig?.nameKey) {\n          {{ userConfig?.nameKey ?? \"\" | translate }}\n          } @else if(userConfig?.name) {\n          {{ userConfig?.name }}\n          } @else {\n          {{ getFallbackUserName() }}\n          }\n        </p>\n      </div>\n    </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level)\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if(navConfig().showVersion !== false) {\n        <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n" }]
+            args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\">\n  <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n  <div class=\"c-main-nav__viewport\">\n    <!-- Toggle btn -->\n    <button\n      (click)=\"onToggleSidebar()\"\n      class=\"c-main-nav__toggle c-mn-toggle\"\n      [title]=\"\n        isCollapsed\n          ? ('Expandir navegaci\u00F3n' | translate)\n          : ('Colapsar navegaci\u00F3n' | translate)\n      \"\n      aria-label=\"Expandir navegaci\u00F3n\"\n    ></button>\n\n    <!-- Brand -->\n    @if (navConfig().showLogo !== false) {\n      <div class=\"c-main-nav__brand c-mn-brand\">\n        @if (getCollapsedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__iso\"\n            [src]=\"getCollapsedLogoSrc()\"\n            [width]=\"getCollapsedLogoSettings().width\"\n            [height]=\"getCollapsedLogoSettings().height\"\n            [alt]=\"getCollapsedLogoSettings().alt\"\n          />\n        }\n        @if (getExpandedLogoSrc()) {\n          <img\n            class=\"c-mn-brand__logo\"\n            [src]=\"getExpandedLogoSrc()\"\n            [width]=\"getExpandedLogoSettings().width\"\n            [height]=\"getExpandedLogoSettings().height\"\n            [alt]=\"getExpandedLogoSettings().alt\"\n          />\n        }\n      </div>\n    }\n\n    <!-- User -->\n    @if (shouldShowUserSection()) {\n      <div class=\"c-main-nav__user c-mn-user\">\n        <div class=\"c-mn-user__short c-mn-user__nav-close\">\n          <span>{{ getUserInitials() }}</span>\n        </div>\n        <div class=\"c-mn-user__nav-open\">\n          <p class=\"c-mn-user__welcome\">\n            @if (userConfig?.greetingKey) {\n              {{ userConfig?.greetingKey ?? \"\" | translate }}\n            } @else if (userConfig?.greetingText) {\n              {{ userConfig?.greetingText }}\n            } @else {\n              Bienvenido/a,\n            }\n          </p>\n          @if (userConfig?.optionalText) {\n            <p class=\"c-mn-user__optional-text\">\n              {{ userConfig?.optionalText ?? \"\" | translate }}\n            </p>\n          }\n          <p class=\"c-mn-user__name\">\n            @if (userConfig?.nameKey) {\n              {{ userConfig?.nameKey ?? \"\" | translate }}\n            } @else if (userConfig?.name) {\n              {{ userConfig?.name }}\n            } @else {\n              {{ getFallbackUserName() }}\n            }\n          </p>\n        </div>\n      </div>\n    }\n\n    <!-- Nav -->\n    <nav class=\"c-main-nav__nav c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n          <ng-container *ngFor=\"let item of items; let i = index\">\n            <ng-container\n              *ngIf=\"\n                hasPermission(item) &&\n                !item.hidden &&\n                (!item.children || hasVisibleChildren(item))\n              \"\n            >\n              <li\n                class=\"c-mn-nav__item c-mn-nav__submenu\"\n                [ngClass]=\"{\n                  'is-expanded': isSectionExpanded(item.label, level),\n                }\"\n                *ngIf=\"\n                  item.children && hasVisibleChildren(item);\n                  else singleLink\n                \"\n              >\n                <button\n                  class=\"c-mn-nav__link\"\n                  [ngClass]=\"{ 'is-active': isParentActive(item) }\"\n                  (click)=\"toggleSection(item.label, level)\"\n                  [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                >\n                  <span\n                    class=\"c-mn-nav__icon\"\n                    [ngClass]=\"item.icon | coreIconCompat\"\n                  ></span>\n                  <span class=\"c-mn-nav__text\">\n                    {{ item.label | translate }}\n                    <span class=\"c-mn-nav__plus\"></span>\n                  </span>\n                </button>\n\n                <div class=\"c-mn-nav__subholder\">\n                  <ul class=\"c-mn-nav__sublist\">\n                    <ng-container\n                      *ngFor=\"let child of item.children; let j = index\"\n                    >\n                      <ng-container\n                        *ngIf=\"\n                          hasPermission(child) &&\n                          !child.hidden &&\n                          (!child.children || hasVisibleChildren(child))\n                        \"\n                      >\n                        <ng-container *ngIf=\"!child.children; else nestedChild\">\n                          <li class=\"c-mn-nav__subitem\">\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [routerLink]=\"child.disabled ? null : child.path\"\n                              routerLinkActive=\"is-active\"\n                              [routerLinkActiveOptions]=\"{ exact: false }\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                              [ngClass]=\"{ 'is-disabled': child.disabled }\"\n                              [style.pointer-events]=\"\n                                child.disabled ? 'none' : 'auto'\n                              \"\n                              [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n                          </li>\n                        </ng-container>\n\n                        <ng-template #nestedChild>\n                          <li\n                            class=\"c-mn-nav__subitem\"\n                            [ngClass]=\"{\n                              'submenu-open':\n                                isSectionExpanded(child.label, level + 1) &&\n                                !isCollapsed,\n                            }\"\n                            *ngIf=\"child.children && hasVisibleChildren(child)\"\n                          >\n                            <button\n                              class=\"c-mn-nav__sublink\"\n                              [ngClass]=\"{ 'is-active': isParentActive(child) }\"\n                              (click)=\"toggleSection(child.label, level + 1)\"\n                              [title]=\"\n                                isCollapsed ? (child.label | translate) : ''\n                              \"\n                            >\n                              {{ child.label | translate }}\n                            </button>\n\n                            <div class=\"c-mn-nav__subholder\">\n                              <ul class=\"c-mn-nav__sublist\">\n                                <ng-container\n                                  *ngFor=\"let subItem of child.children\"\n                                >\n                                  <li\n                                    class=\"c-mn-nav__subitem\"\n                                    *ngIf=\"\n                                      hasPermission(subItem) && !subItem.hidden\n                                    \"\n                                  >\n                                    <button\n                                      class=\"c-mn-nav__sublink\"\n                                      [routerLink]=\"subItem.path\"\n                                      routerLinkActive=\"is-active\"\n                                    >\n                                      {{ subItem.label | translate }}\n                                    </button>\n                                  </li>\n                                </ng-container>\n                              </ul>\n                            </div>\n                          </li>\n                        </ng-template>\n                      </ng-container>\n                    </ng-container>\n                  </ul>\n                </div>\n              </li>\n\n              <ng-template #singleLink>\n                <li class=\"c-mn-nav__item\" [ngClass]=\"item.cssClass\">\n                  <!-- Nav item with custom action (no routing) -->\n                  <ng-container *ngIf=\"hasCustomAction(item); else routeLink\">\n                    <button\n                      class=\"c-mn-nav__link\"\n                      (click)=\"onNavItemClick(item, $event)\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-container>\n\n                  <!-- Nav item with router link (default behavior) -->\n                  <ng-template #routeLink>\n                    <button\n                      class=\"c-mn-nav__link\"\n                      [routerLink]=\"item.disabled ? null : item.path\"\n                      routerLinkActive=\"is-active\"\n                      [routerLinkActiveOptions]=\"{ exact: false }\"\n                      [title]=\"isCollapsed ? (item.label | translate) : ''\"\n                      [ngClass]=\"{ 'is-disabled': item.disabled }\"\n                      [disabled]=\"item.disabled\"\n                      [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n                    >\n                      <span\n                        class=\"c-mn-nav__icon\"\n                        [ngClass]=\"item.icon | coreIconCompat\"\n                      ></span>\n                      <span class=\"c-mn-nav__text\">\n                        {{ item.label | translate }}\n                      </span>\n                    </button>\n                  </ng-template>\n                </li>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            menuItems;\n            context: { items: navItems(), level: 0 }\n          \"\n        ></ng-container>\n      </ul>\n    </nav>\n    <!-- .c-mn-nav -->\n\n    <!-- TODO User -->\n\n    <nav class=\"c-main-nav__bottom c-mn-nav\">\n      <ul class=\"c-mn-nav__list\">\n        <li class=\"c-mn-nav__item\">\n          <button\n            class=\"c-mn-nav__link\"\n            (click)=\"logout()\"\n            [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n          >\n            <span class=\"c-mn-nav__icon icon-logout\"></span>\n            <span class=\"c-mn-nav__text\">\n              {{ \"sidebar.logout\" | translate }}\n            </span>\n          </button>\n        </li>\n        @if (navConfig().showVersion !== false) {\n          <li class=\"c-mn-nav__version\">v{{ appVersion().full }}</li>\n        }\n      </ul>\n    </nav>\n  </div>\n  <!-- .c-main-nav__viewport -->\n</div>\n<!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n" }]
         }], ctorParameters: () => [] });
 
 class LayoutStateService {