@acorex/platform 21.0.0-next.85 → 21.0.0-next.89

package/fesm2022/{acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs → acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs}

@@ -1,9 +1,11 @@
-import { objectKeyValueTransforms, AXPPlatformScope } from '@acorex/platform/core';
-import { AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
+import { AXPCommonSettings } from '@acorex/platform/common';
+import { AXPWidgetsCatalog, AXPPlatformScope } from '@acorex/platform/contracts';
+import { objectKeyValueTransforms } from '@acorex/platform/core';
 import { AXPThemeLayoutSetting, AXPThemeMode, AXPMenuVerticalMode } from './acorex-platform-themes-shared.mjs';
 
 const I18N = '@layout:settings.appearance';
 const verticalModeVisibility = `{{ context.eval('${AXPThemeLayoutSetting.MenuOrientation}') !== 'horizontal' }}`;
+const maxOpenTabsVisibility = `{{ context.eval('${AXPCommonSettings.NavigationMode}') !== 'simple' }}`;
 class AXPThemeSettingProvider {
     constructor(_injector) {
         this._injector = _injector;
@@ -126,6 +128,51 @@ class AXPThemeSettingProvider {
                 },
             },
             description: `${I18N}.items.root-menu.badge.description`,
+        })
+            .endSection()
+            // Add the 'Navigation' section
+            .addSection('navigation', `${I18N}.items.navigation.title`, `${I18N}.items.navigation.description`)
+            .addSetting({
+            key: AXPCommonSettings.NavigationMode,
+            title: `${I18N}.items.navigation.mode.title`,
+            scope: AXPPlatformScope.User,
+            isInherited: true,
+            defaultValue: 'simple',
+            requiresPageRefresh: true,
+            widget: {
+                type: AXPWidgetsCatalog.menuOrientationChooser,
+                options: {
+                    chooser: 'navigation-mode',
+                },
+                layout: {
+                    positions: {
+                        sm: {
+                            colSpan: 12,
+                        },
+                        md: {
+                            colSpan: 6,
+                        },
+                    },
+                },
+            },
+            description: `${I18N}.items.navigation.mode.description`,
+        })
+            .addSetting({
+            key: AXPCommonSettings.MaxOpenTabs,
+            title: `${I18N}.items.navigation.max-open-tabs.title`,
+            scope: AXPPlatformScope.User,
+            isInherited: true,
+            defaultValue: 5,
+            widget: {
+                type: AXPWidgetsCatalog.number,
+                options: {
+                    minValue: 2,
+                    maxValue: 20,
+                    step: 1,
+                    visibility: maxOpenTabsVisibility,
+                },
+            },
+            description: `${I18N}.items.navigation.max-open-tabs.description`,
         })
             .endSection()
             // Add the 'Scale & Layout' section
@@ -184,4 +231,4 @@ class AXPThemeSettingProvider {
 }
 
 export { AXPThemeSettingProvider };
-//# sourceMappingURL=acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs.map
+//# sourceMappingURL=acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs.map

package/fesm2022/acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs","sources":["../../../../libs/platform/themes/shared/src/lib/settings.provider.ts"],"sourcesContent":["import { Injector } from '@angular/core';\nimport { AXPCommonSettings, AXPSettingDefinitionProvider, AXPSettingDefinitionProviderContext } from '@acorex/platform/common';\nimport { AXPPlatformScope } from '@acorex/platform/contracts';\nimport { objectKeyValueTransforms } from '@acorex/platform/core';\nimport { AXPWidgetsCatalog } from '@acorex/platform/contracts';\nimport { AXPThemeLayoutSetting } from './contracts/settings.keys';\nimport { AXPMenuVerticalMode, AXPThemeMode } from './contracts/theme.types';\n\nconst I18N = '@layout:settings.appearance';\nconst verticalModeVisibility = `{{ context.eval('${AXPThemeLayoutSetting.MenuOrientation}') !== 'horizontal' }}`;\nconst maxOpenTabsVisibility = `{{ context.eval('${AXPCommonSettings.NavigationMode}') !== 'simple' }}`;\n\nexport class AXPThemeSettingProvider implements AXPSettingDefinitionProvider {\n  constructor(private _injector: Injector) {}\n\n  async provide(context: AXPSettingDefinitionProviderContext): Promise<void> {\n    // Define the 'Appearance Settings' group\n    context\n      .addGroup(\n        'appearance',\n        `${I18N}.nav-title`,\n        `${I18N}.description`,\n        'fa-light fa-palette',\n        `${I18N}.title`,\n        50,\n      )\n\n      // Add the 'Brightness & Color' section\n      .addSection('color', `${I18N}.items.color.title`, `${I18N}.items.color.description`)\n\n      // Add the 'Theme Mode' setting\n      .addSetting({\n        key: AXPThemeLayoutSetting.Mode,\n        title: `${I18N}.items.color.mode.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: AXPThemeMode.Light,\n        valueTransforms: objectKeyValueTransforms('id'),\n        widget: {\n          type: AXPWidgetsCatalog.themeModeChooser,\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.color.mode.description`,\n      })\n\n      .addSetting({\n        key: AXPThemeLayoutSetting.Palette,\n        title: `${I18N}.items.color.palette.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 'default',\n        valueTransforms: objectKeyValueTransforms('name'),\n        widget: {\n          type: 'theme-palette-chooser',\n          layout: {\n            stacked: true,\n          },\n        },\n        description: `${I18N}.items.color.palette.description`,\n      })\n\n      // End the 'Brightness & Color' section\n      .endSection()\n\n      // Add the 'Root Menu' section\n      .addSection('root-menu', `${I18N}.items.root-menu.title`, `${I18N}.items.root-menu.description`)\n\n      // Add the 'Menu Orientation' setting\n      .addSetting({\n        key: AXPThemeLayoutSetting.MenuOrientation,\n        title: `${I18N}.items.root-menu.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 'vertical',\n        valueTransforms: objectKeyValueTransforms('id'),\n        widget: {\n          type: AXPWidgetsCatalog.menuOrientationChooser,\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.root-menu.description`,\n      })\n\n      .addSetting({\n        key: AXPThemeLayoutSetting.MenuVerticalMode,\n        title: `${I18N}.items.root-menu.vertical-mode.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: AXPMenuVerticalMode.Full,\n        valueTransforms: objectKeyValueTransforms('id'),\n        widget: {\n          type: AXPWidgetsCatalog.menuOrientationChooser,\n          options: {\n            chooser: 'vertical-mode',\n            visibility: verticalModeVisibility,\n          },\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.root-menu.vertical-mode.description`,\n      })\n\n      // Add the 'Menu Badge Visibility' setting\n      .addSetting({\n        key: AXPThemeLayoutSetting.MenuBadgeVisible,\n        title: `${I18N}.items.root-menu.badge.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: true,\n        widget: {\n          type: AXPWidgetsCatalog.toggle,\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.root-menu.badge.description`,\n      })\n      .endSection()\n\n      // Add the 'Navigation' section\n      .addSection('navigation', `${I18N}.items.navigation.title`, `${I18N}.items.navigation.description`)\n      .addSetting({\n        key: AXPCommonSettings.NavigationMode,\n        title: `${I18N}.items.navigation.mode.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 'simple',\n        requiresPageRefresh: true,\n        widget: {\n          type: AXPWidgetsCatalog.menuOrientationChooser,\n          options: {\n            chooser: 'navigation-mode',\n          },\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.navigation.mode.description`,\n      })\n      .addSetting({\n        key: AXPCommonSettings.MaxOpenTabs,\n        title: `${I18N}.items.navigation.max-open-tabs.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 5,\n        widget: {\n          type: AXPWidgetsCatalog.number,\n          options: {\n            minValue: 2,\n            maxValue: 20,\n            step: 1,\n            visibility: maxOpenTabsVisibility,\n          },\n        },\n        description: `${I18N}.items.navigation.max-open-tabs.description`,\n      })\n      .endSection()\n\n      // Add the 'Scale & Layout' section\n      .addSection('layout', `${I18N}.items.layout.title`, `${I18N}.items.layout.description`)\n\n      // Add the 'Font Style' setting\n      .addSetting({\n        key: AXPThemeLayoutSetting.Font,\n        title: `${I18N}.items.layout.font.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 'system-ui',\n        valueTransforms: objectKeyValueTransforms('id'),\n        widget: {\n          type: AXPWidgetsCatalog.fontStyleChooser,\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.layout.font.description`,\n      })\n\n      // Add the 'Font Size' setting\n      .addSetting({\n        key: AXPThemeLayoutSetting.FontSize,\n        title: `${I18N}.items.layout.size.title`,\n        scope: AXPPlatformScope.User,\n        isInherited: true,\n        defaultValue: 'medium',\n        valueTransforms: objectKeyValueTransforms('id'),\n        widget: {\n          type: AXPWidgetsCatalog.fontSizeChooser,\n          layout: {\n            positions: {\n              sm: {\n                colSpan: 12,\n              },\n              md: {\n                colSpan: 6,\n              },\n            },\n          },\n        },\n        description: `${I18N}.items.layout.size.description`,\n      })\n\n      // End the 'Scale & Layout' section\n      .endSection()\n\n      // End the 'Appearance Settings' group\n      .endGroup();\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-platform-themes-shared.mjs

@@ -9,8 +9,9 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { computed, inject, effect, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, Injector, NgModule } from '@angular/core';
 import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import { AXPPlatformScope } from '@acorex/platform/contracts';
 import * as i1$3 from '@acorex/platform/core';
-import { AXPScreenSize, AXPDeviceService, AXPPlatformScope, AXPComponentSlotModule } from '@acorex/platform/core';
+import { AXPScreenSize, AXPDeviceService, AXPDebugService, OVERLAY_LAYOUT_TRACE_NS, AXPComponentSlotModule } from '@acorex/platform/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, filter } from 'rxjs';
@@ -128,7 +129,7 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, overlayLoadingTaskCount, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
     const effectiveMenuVerticalMode = computed(() => {
         if (!deviceService.isLarge()) {
             return AXPMenuVerticalMode.Full;
@@ -150,6 +151,7 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
             ? sideMenuState() === AXPSideMenuState.Opened
             : overlaySideMenuOpen()),
         isOverlayLoading: computed(() => overlayLoading()),
+        overlayTaskCount: computed(() => overlayLoadingTaskCount()),
         isNavigationLoading: computed(() => navigationLoading()),
         isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
         effectiveMenuVerticalMode,
@@ -206,19 +208,34 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
                 timeoutId = window.setTimeout(() => {
                     patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() + 1 });
                     patchState(store, { overlayLoading: true });
+                    AXPDebugService.instance?.trace(OVERLAY_LAYOUT_TRACE_NS, 'theme', 'overlay ON (delayed)', () => ({
+                        taskCount: store.overlayLoadingTaskCount(),
+                        overlayLoading: store.overlayLoading(),
+                        delay,
+                    }));
                 }, delay);
             }
             else {
                 patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() + 1 });
                 patchState(store, { overlayLoading: true });
+                AXPDebugService.instance?.trace(OVERLAY_LAYOUT_TRACE_NS, 'theme', 'overlay ON', () => ({
+                    taskCount: store.overlayLoadingTaskCount(),
+                    overlayLoading: store.overlayLoading(),
+                }));
             }
             // Store timeout ID to clear it if the loading ends before delay
             store._loadingTimeoutId = timeoutId;
         }
         else {
+            const prevCount = store.overlayLoadingTaskCount();
             if (store.overlayLoadingTaskCount() > 0) {
                 patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() - 1 });
             }
+            AXPDebugService.instance?.trace(OVERLAY_LAYOUT_TRACE_NS, 'theme', 'overlay OFF requested', () => ({
+                prevTaskCount: prevCount,
+                taskCount: store.overlayLoadingTaskCount(),
+                overlayLoading: store.overlayLoading(),
+            }));
             if (store.overlayLoadingTaskCount() === 0) {
                 const timeoutId = store._loadingTimeoutId;
                 if (timeoutId) {
@@ -228,11 +245,27 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
                 timer(minimumDisplayTime).subscribe(() => {
                     if (store.overlayLoadingTaskCount() === 0) {
                         patchState(store, { overlayLoading: false });
+                        AXPDebugService.instance?.trace(OVERLAY_LAYOUT_TRACE_NS, 'theme', 'overlay flag false (after min display)', () => ({
+                            taskCount: store.overlayLoadingTaskCount(),
+                        }));
                     }
                 });
             }
         }
     };
+    const _clearOverlayLoading = () => {
+        const prevCount = store.overlayLoadingTaskCount();
+        const timeoutId = store._loadingTimeoutId;
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            store._loadingTimeoutId = null;
+        }
+        patchState(store, { overlayLoadingTaskCount: 0, overlayLoading: false });
+        AXPDebugService.instance?.trace(OVERLAY_LAYOUT_TRACE_NS, 'theme', 'overlay CLEARED (force)', () => ({
+            prevTaskCount: prevCount,
+            taskCount: 0,
+        }));
+    };
     const _setNavigationLoading = (value, delay) => {
         if (value) {
             patchState(store, { navigationLoadingTaskCount: store.navigationLoadingTaskCount() + 1 });
@@ -341,6 +374,10 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         setOverlayLoading(value, delay) {
             _setOverlayLoading(value, delay);
         },
+        /** Resets overlay task count and hides overlay (page-ready / destroy). */
+        clearOverlayLoading() {
+            _clearOverlayLoading();
+        },
         async loadSettings() {
             await _applySettings();
         },
@@ -1673,21 +1710,54 @@ const AXPFontStyleChooserWidget = {
 class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.orientations = computed(() => this.options()['chooser'] === 'vertical-mode'
-            ? [
-                { id: 'compact', image: '/assets/images/menu-mode/compact.svg' },
-                { id: 'full', image: '/assets/images/menu-mode/full.svg' },
-            ]
-            : [
-                { id: 'vertical', icon: 'fa-regular fa-square-ellipsis-vertical' },
-                { id: 'horizontal', icon: 'fa-regular fa-square-ellipsis' },
-            ], ...(ngDevMode ? [{ debugName: "orientations" }] : /* istanbul ignore next */ []));
+        this.orientations = computed(() => {
+            const chooser = this.options()['chooser'];
+            if (chooser === 'vertical-mode') {
+                return [
+                    {
+                        id: 'compact',
+                        image: '/assets/images/menu-mode/compact.svg',
+                        labelKey: '@layout:terms.menu-modes.compact',
+                    },
+                    {
+                        id: 'full',
+                        image: '/assets/images/menu-mode/full.svg',
+                        labelKey: '@layout:terms.menu-modes.full',
+                    },
+                ];
+            }
+            if (chooser === 'navigation-mode') {
+                return [
+                    {
+                        id: 'simple',
+                        image: '/assets/images/navigation-mode/simple.svg',
+                        labelKey: '@layout:terms.navigation-modes.simple',
+                    },
+                    {
+                        id: 'tabular',
+                        image: '/assets/images/navigation-mode/tabular.svg',
+                        labelKey: '@layout:terms.navigation-modes.tabular',
+                    },
+                ];
+            }
+            return [
+                {
+                    id: 'vertical',
+                    icon: 'fa-regular fa-square-ellipsis-vertical',
+                    labelKey: '@layout:terms.menu-modes.vertical',
+                },
+                {
+                    id: 'horizontal',
+                    icon: 'fa-regular fa-square-ellipsis',
+                    labelKey: '@layout:terms.menu-modes.horizontal',
+                },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "orientations" }] : /* istanbul ignore next */ []));
         this.selectedOrientation = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrientation" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             const options = this.orientations();
-            const value = this.getValue();
-            if (value) {
-                this.selectedOrientation.set(options.find((o) => o.id === value) ?? options[0]);
+            if (this.getValue()) {
+                this.selectedOrientation.set(options.find((o) => o.id === this.getValue()) ?? options[0]);
             }
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
@@ -1698,31 +1768,41 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (orientation of orientations(); track orientation.id) {
-      <div (click)="onOrientationClick(orientation)" [class.--selected]="orientation.id === selectedOrientation()?.id">
+      <div
+        (click)="onOrientationClick(orientation)"
+        [class.--selected]="orientation.id === selectedOrientation()?.id"
+        [class.--visual]="!!orientation.image"
+      >
         @if (orientation.image) {
-          <img [src]="orientation.image" alt="" />
+          <img [src]="orientation.image" [alt]="orientation.labelKey | translate | async" />
+          <span>{{ orientation.labelKey | translate | async }}</span>
         } @else {
           <i [class]="orientation.icon"></i>
-          <span>{{ '@layout:terms.menu-modes.' + orientation.id | translate | async }}</span>
+          <span>{{ orientation.labelKey | translate | async }}</span>
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>div img{height:2rem;width:auto}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div.--visual{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.5rem;padding:.75rem}:host>div.--visual img{display:block;height:auto;width:100%}:host>div.--visual>span{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.375}:host>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (orientation of orientations(); track orientation.id) {
-      <div (click)="onOrientationClick(orientation)" [class.--selected]="orientation.id === selectedOrientation()?.id">
+      <div
+        (click)="onOrientationClick(orientation)"
+        [class.--selected]="orientation.id === selectedOrientation()?.id"
+        [class.--visual]="!!orientation.image"
+      >
         @if (orientation.image) {
-          <img [src]="orientation.image" alt="" />
+          <img [src]="orientation.image" [alt]="orientation.labelKey | translate | async" />
+          <span>{{ orientation.labelKey | translate | async }}</span>
         } @else {
           <i [class]="orientation.icon"></i>
-          <span>{{ '@layout:terms.menu-modes.' + orientation.id | translate | async }}</span>
+          <span>{{ orientation.labelKey | translate | async }}</span>
         }
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionCdkModule, AXTranslationModule], styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>div img{height:2rem;width:auto}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionCdkModule, AXTranslationModule], styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div.--visual{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.5rem;padding:.75rem}:host>div.--visual img{display:block;height:auto;width:100%}:host>div.--visual>span{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.375}:host>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}\n"] }]
         }] });
 
 var menuOrientationChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -2246,7 +2326,7 @@ class AXPThemesSharedModule {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -2286,7 +2366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useFactory: async () => {
                                 const injector = inject(Injector);
-                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,