@acorex/platform 21.0.0-next.65 → 21.0.0-next.67

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

@@ -1,8 +1,9 @@
 import { objectKeyValueTransforms, AXPPlatformScope } from '@acorex/platform/core';
 import { AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
-import { AXPThemeMode, AXPThemeLayoutSetting } from './acorex-platform-themes-shared.mjs';
+import { AXPThemeLayoutSetting, AXPThemeMode, AXPMenuVerticalMode } from './acorex-platform-themes-shared.mjs';
 
 const I18N = '@layout:settings.appearance';
+const verticalModeVisibility = `{{ context.eval('${AXPThemeLayoutSetting.MenuOrientation}') !== 'horizontal' }}`;
 class AXPThemeSettingProvider {
     constructor(_injector) {
         this._injector = _injector;
@@ -77,6 +78,32 @@ class AXPThemeSettingProvider {
                 },
             },
             description: `${I18N}.items.root-menu.description`,
+        })
+            .addSetting({
+            key: AXPThemeLayoutSetting.MenuVerticalMode,
+            title: `${I18N}.items.root-menu.vertical-mode.title`,
+            scope: AXPPlatformScope.User,
+            isInherited: true,
+            defaultValue: AXPMenuVerticalMode.Full,
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: AXPWidgetsCatalog.menuOrientationChooser,
+                options: {
+                    chooser: 'vertical-mode',
+                    visibility: verticalModeVisibility,
+                },
+                layout: {
+                    positions: {
+                        sm: {
+                            colSpan: 12,
+                        },
+                        md: {
+                            colSpan: 6,
+                        },
+                    },
+                },
+            },
+            description: `${I18N}.items.root-menu.vertical-mode.description`,
         })
             // Add the 'Menu Badge Visibility' setting
             .addSetting({
@@ -157,4 +184,4 @@ class AXPThemeSettingProvider {
 }
 
 export { AXPThemeSettingProvider };
-//# sourceMappingURL=acorex-platform-themes-shared-settings.provider-BgXYCFia.mjs.map
+//# sourceMappingURL=acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs","sources":["../../../../libs/platform/themes/shared/src/lib/settings.provider.ts"],"sourcesContent":["import { Injector } from '@angular/core';\nimport { AXPSettingDefinitionProvider, AXPSettingDefinitionProviderContext } from '@acorex/platform/common';\nimport { AXPPlatformScope, objectKeyValueTransforms } from '@acorex/platform/core';\nimport { AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';\nimport { AXPThemeLayoutSetting } from './settings.keys';\nimport { AXPMenuVerticalMode, AXPThemeMode } from './theme.types';\n\nconst I18N = '@layout:settings.appearance';\nconst verticalModeVisibility = `{{ context.eval('${AXPThemeLayoutSetting.MenuOrientation}') !== 'horizontal' }}`;\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 '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

@@ -16,14 +16,13 @@ import { signalStore, withState, withComputed, withMethods, patchState, withHook
 import { timer, firstValueFrom, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
+import { AXPValueWidgetComponent, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i2$1 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i1$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/layout/widgets';
 import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -42,7 +41,9 @@ var AXPThemeLayoutSetting;
     AXPThemeLayoutSetting["Mode"] = "Common:Setting:Layout.Mode";
     AXPThemeLayoutSetting["SideMenuStatus"] = "Common:Setting:Layout.SideMenu.Status";
     AXPThemeLayoutSetting["SideMenuWidth"] = "Common:Setting:Layout.SideMenu.Width";
+    AXPThemeLayoutSetting["SideMenuCompactWidth"] = "Common:Setting:Layout.SideMenu.CompactWidth";
     AXPThemeLayoutSetting["MenuOrientation"] = "Common:Setting:Layout.RootMenu.Direction";
+    AXPThemeLayoutSetting["MenuVerticalMode"] = "Common:Setting:Layout.RootMenu.VerticalMode";
     AXPThemeLayoutSetting["MenuBadgeVisible"] = "Common:Setting:Layout.RootMenu.Badge";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
@@ -65,7 +66,27 @@ var AXPMenuOrientation;
     AXPMenuOrientation["Vertical"] = "vertical";
     AXPMenuOrientation["Horizontal"] = "horizontal";
 })(AXPMenuOrientation || (AXPMenuOrientation = {}));
+// Vertical side menu display mode
+var AXPMenuVerticalMode;
+(function (AXPMenuVerticalMode) {
+    AXPMenuVerticalMode["Compact"] = "compact";
+    AXPMenuVerticalMode["Full"] = "full";
+})(AXPMenuVerticalMode || (AXPMenuVerticalMode = {}));
+const AXP_SIDE_MENU_FULL_DEFAULT_WIDTH = 300;
+const AXP_SIDE_MENU_COMPACT_WIDTH = 80;
 
+function normalizeMenuVerticalMode(value, fallback) {
+    if (value === AXPMenuVerticalMode.Compact || value === AXPMenuVerticalMode.Full) {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null && 'id' in value) {
+        const id = value.id;
+        if (id === AXPMenuVerticalMode.Compact || id === AXPMenuVerticalMode.Full) {
+            return id;
+        }
+    }
+    return fallback;
+}
 // ThemeStore - Manages theme settings, system changes, and loading states
 const AXPLayoutThemeService = signalStore({ providedIn: 'root' }, 
 // Initial State
@@ -95,7 +116,9 @@ withState(() => {
         sideMenuState: (getInitialScreenSize() === AXPScreenSize.Large
             ? AXPSideMenuState.Opened
             : AXPSideMenuState.Closed),
-        sideMenuWidth: 288,
+        sideMenuWidth: AXP_SIDE_MENU_FULL_DEFAULT_WIDTH,
+        sideMenuCompactWidth: AXP_SIDE_MENU_COMPACT_WIDTH,
+        menuVerticalMode: AXPMenuVerticalMode.Full,
         menuOrientation: 'vertical',
         _listener: null,
         isPrinting: false,
@@ -103,7 +126,7 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, isPrinting, }) => ({
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }) => ({
     isDarkMode: computed(() => {
         if (isPrinting()) {
             return false;
@@ -118,6 +141,9 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
     isOverlayLoading: computed(() => overlayLoading()),
     isNavigationLoading: computed(() => navigationLoading()),
     isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
+    sideMenuDrawerWidth: computed(() => normalizeMenuVerticalMode(menuVerticalMode(), AXPMenuVerticalMode.Full) === AXPMenuVerticalMode.Compact
+        ? sideMenuCompactWidth()
+        : sideMenuWidth()),
 })), 
 // Methods for State Management
 withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService)) => {
@@ -136,12 +162,19 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
             store.menuOrientation();
         patchState(store, { menuOrientation: settingMenuOrientation });
         //
+        const settingMenuVerticalMode = normalizeMenuVerticalMode(await settingsService.get(AXPThemeLayoutSetting.MenuVerticalMode), store.menuVerticalMode());
+        patchState(store, { menuVerticalMode: settingMenuVerticalMode });
+        //
         const fontFamily = await settingsService.get(AXPThemeLayoutSetting.Font);
         const fontSize = await settingsService.get(AXPThemeLayoutSetting.FontSize);
         patchState(store, { font: { family: fontFamily, size: fontSize } });
         //
-        const sideMenuWidth = await settingsService.get(AXPThemeLayoutSetting.SideMenuWidth);
+        const sideMenuWidth = (await settingsService.get(AXPThemeLayoutSetting.SideMenuWidth)) ?? store.sideMenuWidth();
         patchState(store, { sideMenuWidth });
+        //
+        const sideMenuCompactWidth = (await settingsService.get(AXPThemeLayoutSetting.SideMenuCompactWidth)) ??
+            store.sideMenuCompactWidth();
+        patchState(store, { sideMenuCompactWidth });
         await _updateHtmlClass();
     };
     // Update HTML class based on theme
@@ -257,11 +290,27 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
             patchState(store, { sideMenuState: AXPSideMenuState.Closed });
             settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
         },
-        // Set side menu width
+        // Set side menu width in full vertical mode
         setSideMenuWidth(width) {
             patchState(store, { sideMenuWidth: width });
             settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuWidth, width);
         },
+        // Set side menu width in compact vertical mode
+        setSideMenuCompactWidth(width) {
+            patchState(store, { sideMenuCompactWidth: width });
+            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuCompactWidth, width);
+        },
+        // Persist drawer width for the active vertical menu mode
+        setSideMenuDrawerWidth(width) {
+            if (normalizeMenuVerticalMode(store.menuVerticalMode(), AXPMenuVerticalMode.Full) === AXPMenuVerticalMode.Compact) {
+                patchState(store, { sideMenuCompactWidth: width });
+                settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuCompactWidth, width);
+            }
+            else {
+                patchState(store, { sideMenuWidth: width });
+                settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuWidth, width);
+            }
+        },
         // Toggle side menu state
         toggleSideMenu() {
             const newSideMenuState = store.sideMenuState() === AXPSideMenuState.Opened ? AXPSideMenuState.Closed : AXPSideMenuState.Opened;
@@ -306,7 +355,17 @@ withHooks((store, settingsService = inject(AXPSettingsService)) => ({
             .pipe(filter((c) => [AXPPlatformScope.Platform, AXPPlatformScope.Tenant, AXPPlatformScope.User].includes(c.scope)))
             .subscribe(async (changes) => {
             const keys = Object.values(AXPThemeLayoutSetting);
-            if (changes.keys.some((key) => keys.includes(key))) {
+            if (!changes.keys.some((key) => keys.includes(key))) {
+                return;
+            }
+            if (changes.keys.includes(AXPThemeLayoutSetting.MenuVerticalMode)) {
+                patchState(store, {
+                    menuVerticalMode: normalizeMenuVerticalMode(changes.values[AXPThemeLayoutSetting.MenuVerticalMode], store.menuVerticalMode()),
+                });
+            }
+            const shouldReloadSettings = changes.keys.some((key) => keys.includes(key) &&
+                key !== AXPThemeLayoutSetting.MenuVerticalMode);
+            if (shouldReloadSettings) {
                 await store['loadSettings']();
             }
         });
@@ -1591,14 +1650,21 @@ const AXPFontStyleChooserWidget = {
 class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.orientations = signal([
-            { 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(() => 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.selectedOrientation = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrientation" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
-            if (this.getValue()) {
-                this.selectedOrientation.set(this.orientations().find((o) => o.id === this.getValue()) ?? this.orientations()[0]);
+            const options = this.orientations();
+            const value = this.getValue();
+            if (value) {
+                this.selectedOrientation.set(options.find((o) => o.id === value) ?? options[0]);
             }
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
@@ -1610,26 +1676,30 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     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>
+        @if (orientation.image) {
+          <img [src]="orientation.image" alt="" />
+        } @else {
           <i [class]="orientation.icon"></i>
-        </div>
-        <span>{{ '@layout:terms.menu-modes.' + orientation.id | translate | async }}</span>
+          <span>{{ '@layout:terms.menu-modes.' + orientation.id | 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>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>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 }); }
 }
 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>
+        @if (orientation.image) {
+          <img [src]="orientation.image" alt="" />
+        } @else {
           <i [class]="orientation.icon"></i>
-        </div>
-        <span>{{ '@layout:terms.menu-modes.' + orientation.id | translate | async }}</span>
+          <span>{{ '@layout:terms.menu-modes.' + orientation.id | 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>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>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"] }]
         }] });
 
 var menuOrientationChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -2153,7 +2223,7 @@ class AXPThemesSharedModule {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-BgXYCFia.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -2193,7 +2263,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-BgXYCFia.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,
@@ -2207,5 +2277,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPLayoutThemeService, AXPMenuOrientation, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
+export { AXPLayoutThemeService, AXPMenuOrientation, AXPMenuVerticalMode, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_SIDE_MENU_COMPACT_WIDTH, AXP_SIDE_MENU_FULL_DEFAULT_WIDTH, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map