@acorex/platform 19.2.19 → 19.3.0-next.0

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

@@ -1,27 +1,67 @@
+import { AXBadgeComponent } from '@acorex/components/badge';
+import * as i1$1 from '@acorex/platform/common';
+import { AXPTaskBadgeService, AXPSettingService, AXPComponentSlotModule, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, effect, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, contentChild, ElementRef, InjectionToken, signal, Injector, NgModule } from '@angular/core';
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, contentChild, computed, InjectionToken, inject, NgModule, input, signal, effect, Directive } from '@angular/core';
 import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$2 from '@acorex/platform/common';
-import { AXPSettingScope, AXPSettingService, AXPComponentSlotModule, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { timer, firstValueFrom, filter } from 'rxjs';
+import { timer, firstValueFrom, fromEvent, Subscription, filter } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
-import * as i5 from '@acorex/core/translation';
+import { AXPPlatformScope } from '@acorex/platform/core';
+import * as i2$1 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i2$1 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, objectKeyValueTransforms, AXPWidgetComponent, AXP_WIDGETS_LAYOUT_GROUP, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import * as i2$2 from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@acorex/cdk/selection';
 import { AXSelectionModule } from '@acorex/cdk/selection';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
 
+class AXPTaskBadgeDirective {
+    constructor() {
+        this.badgeService = inject(AXPTaskBadgeService);
+        this.host = inject(AXBadgeComponent); // assumes it's applied on <ax-badge>
+        this.hostElement = this.host.getHostElement();
+        this.badgeKey = input(undefined);
+        this.count = input(0, { alias: 'axp-task-badge' });
+        this.displayCount = computed(() => {
+            const value = this.count() || (this.badgeKey() && this.badgeService.getCount(this.badgeKey())());
+            return value ? value.toString() : '';
+        });
+        this.#eff = effect(() => {
+            this.setValueOfInputSignal(this.host.text, this.displayCount());
+            if (!this.displayCount()) {
+                this.hostElement.style.display = 'none';
+            }
+            else {
+                this.hostElement.style.removeProperty('display');
+            }
+        });
+    }
+    #eff;
+    setValueOfInputSignal(signal, value) {
+        const node = signal[SIGNAL];
+        signalSetFn(node, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: AXPTaskBadgeDirective, isStandalone: true, selector: "[axp-task-badge]", inputs: { badgeKey: { classPropertyName: "badgeKey", publicName: "badgeKey", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "axp-task-badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axp-task-badge]',
+                    standalone: true,
+                }]
+        }] });
+
 class AXPThemeLayoutPagePrimaryActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -97,25 +137,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 
 class AXPThemeLayoutBlockComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.hostElement = this.elementRef.nativeElement;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutBlockComponent, isStandalone: true, selector: "\n    axp-layout-content, \n    axp-layout-page-content, \n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-title-bar,\n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutBlockComponent, isStandalone: true, selector: "\n\n    axp-page-content, \n    axp-page-footer,\n    axp-page-header,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-container,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: `
+
+    axp-page-content, 
+    axp-page-footer,
+    axp-page-header,
+    axp-page-toolbar,
+
     axp-layout-content, 
     axp-layout-page-content, 
+
     axp-layout-sections,
     axp-layout-body,
+    axp-layout-container,
     axp-layout-page-body,
     axp-layout-prefix,
     axp-layout-suffix,
+    axp-layout-title-bar,
     axp-layout-title, 
+    axp-layout-title-actions, 
     axp-layout-nav-button, 
     axp-layout-description, 
-    axp-layout-title-bar,
     axp-layout-breadcrumbs,
     axp-layout-list-action,
     `,
@@ -307,7 +360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class AXPThemeLayoutStartSideComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
     <ng-content select="axp-layout-footer"></ng-content>
@@ -318,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-page-start-side',
+                    selector: 'axp-layout-page-start-side, axp-layout-start-side',
                     template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
@@ -330,7 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 class AXPThemeLayoutEndSideComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
     <ng-content select="axp-layout-footer"></ng-content>
@@ -341,7 +394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     imports: [CommonModule],
                     standalone: true,
-                    selector: 'axp-layout-page-end-side',
+                    selector: 'axp-layout-page-end-side, axp-layout-end-side',
                     template: `
     <ng-content select="axp-layout-header"></ng-content>
     <ng-content select="axp-layout-content"></ng-content>
@@ -386,7 +439,8 @@ var AXPThemeLayoutSetting;
     AXPThemeLayoutSetting["Mode"] = "layout:theme:mode";
     AXPThemeLayoutSetting["SideMenuStatus"] = "layout:theme:sidemenu:status";
     AXPThemeLayoutSetting["SideMenuWidth"] = "layout:theme:sidemenu:width";
-    AXPThemeLayoutSetting["MenuOrientation"] = "layout:theme:menu:orientation";
+    AXPThemeLayoutSetting["MenuOrientation"] = "layout:theme:root-menu:direction";
+    AXPThemeLayoutSetting["MenuBadgeVisible"] = "layout:theme:root-menu:badge";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
 // Theme Enum
@@ -423,25 +477,6 @@ var AXPMenuOrientation;
     AXPMenuOrientation["Horizontal"] = "horizontal";
 })(AXPMenuOrientation || (AXPMenuOrientation = {}));
 
-const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
-    providedIn: 'root',
-    factory: () => {
-        return new AXPThemePaletteProviderDefault();
-    },
-});
-class AXPThemePaletteProviderDefault {
-    getList() {
-        return Promise.resolve([
-            {
-                name: 'default',
-                title: 'Default',
-                path: '/assets/themes/palletes/default.css',
-                colors: [],
-            },
-        ]);
-    }
-}
-
 // ThemeStore - Manages theme settings, system changes, and loading states
 const AXPLayoutThemeService = signalStore({ providedIn: 'root' }, 
 // Initial State
@@ -473,7 +508,7 @@ withState(() => {
     };
     const state = {
         currentMode: AXPThemeMode.System,
-        currentPallete: 'default',
+        currentPalette: 'default',
         systemThemeMode: (isSystemDark ? AXPThemeMode.Dark : AXPThemeMode.Light),
         font: {
             family: 'system-ui',
@@ -515,14 +550,14 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenS
     isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
 })), 
 // Methods for State Management
-withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettingService), pallets = inject(AXP_THEME_PALETTE_PROVIDER)) => {
+withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettingService)) => {
     const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
         const settingThemeMode = (await settingService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
         patchState(store, { currentMode: settingThemeMode });
         //
         const settingThemePallete = (await settingService.get(AXPThemeLayoutSetting.Palette)) ?? 'default';
-        patchState(store, { currentPallete: settingThemePallete });
+        patchState(store, { currentPalette: settingThemePallete });
         //
         const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
         patchState(store, { sideMenuState: settingSideMenu });
@@ -547,7 +582,7 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         html.style.fontFamily = store.font().family;
         html.style.fontSize = store.font().size;
         //
-        await _applyThemePalette(store.currentPallete());
+        await _applyThemePalette(store.currentPalette());
     };
     // Update screen size based on window width
     const _updateScreenSize = () => {
@@ -564,12 +599,10 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         }
         if (newScreenSize !== store.screenSize()) {
             patchState(store, { screenSize: newScreenSize });
-            if (store.sideMenuState() !== AXPSideMenuState.Closed) {
-                patchState(store, { sideMenuState: newScreenSize === AXPScreenSize.Small ? AXPSideMenuState.Closed : AXPSideMenuState.Opened });
-                settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
+            if (!store.isLarge()) {
+                patchState(store, { sideMenuState: AXPSideMenuState.Closed });
+                settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
             }
-            console.log('screenSize', newScreenSize);
-            console.log('deviceType', store.deviceType());
         }
     };
     const _setOverlayLoading = async (value, delay = 0) => {
@@ -626,10 +659,8 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
     };
     // Helper method to apply a cached theme palette
     const _applyThemePalette = async (name) => {
-        const pallete = (await pallets.getList()).find(c => c.name === name);
-        if (!pallete) {
-            return;
-        }
+        // TODO: Get the path from the palette provider token
+        const path = `/assets/themes/palettes/css/${name}.css`;
         // Check if the current theme is already applied
         const existingStyle = document.querySelector(`style[data-theme="${name}"]`);
         if (existingStyle) {
@@ -638,7 +669,7 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         _setNavigationLoading(true);
         try {
             // Fetch the CSS file via HttpClient
-            const cssText = await firstValueFrom(http.get(pallete.path, { responseType: 'text' }));
+            const cssText = await firstValueFrom(http.get(path, { responseType: 'text' }));
             // Create a new <style> tag and apply the CSS
             const style = document.createElement('style');
             style.setAttribute('data-theme', name);
@@ -662,30 +693,30 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
     return {
         // Change theme and update HTML class
         changeThemeMode(theme) {
-            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.Mode, theme);
+            settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.Mode, theme);
             patchState(store, { currentMode: theme });
             _updateHtmlClass();
         },
         // Open side menu
         openSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Opened });
-            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
+            settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
         },
         // Close side menu
         closeSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
+            settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
         },
         // Set side menu width
         setSideMenuWidth(width) {
             patchState(store, { sideMenuWidth: width });
-            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuWidth, width);
+            settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuWidth, width);
         },
         // Toggle side menu state
         toggleSideMenu() {
             const newSideMenuState = store.sideMenuState() === AXPSideMenuState.Opened ? AXPSideMenuState.Closed : AXPSideMenuState.Opened;
             patchState(store, { sideMenuState: newSideMenuState });
-            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
+            settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
         },
         // Set navigation loading state with a task counter
         setNavigationLoading(value, delay) {
@@ -715,15 +746,19 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         },
         // Set up event listener for window resize
         _setupResizeListener() {
-            const listener = () => {
+            const subscription = fromEvent(window, 'resize')
+                .pipe(debounceTime(250) // 250ms debounce delay
+            )
+                .subscribe(() => {
                 _updateScreenSize();
-            };
-            window.addEventListener('resize', listener);
-            return listener;
+            });
+            return subscription;
         },
         // Remove event listener for window resize
-        _removeResizeListener(listener) {
-            window.removeEventListener('resize', listener);
+        _removeResizeListener(subscription) {
+            if (subscription) {
+                subscription.unsubscribe();
+            }
         },
     };
 }), 
@@ -731,7 +766,7 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
 withHooks((store, settingService = inject(AXPSettingService)) => ({
     onInit() {
         //
-        settingService.onChanged.pipe(filter(c => c.scope == AXPSettingScope.User)).subscribe(async (changes) => {
+        settingService.onChanged.pipe(filter(c => c.scope == AXPPlatformScope.User)).subscribe(async (changes) => {
             const keys = Object.values(AXPThemeLayoutSetting);
             if (changes.keys.some((key) => keys.includes(key))) {
                 await store.loadSettings();
@@ -741,8 +776,8 @@ withHooks((store, settingService = inject(AXPSettingService)) => ({
         const listener = store._setupSystemColorListener();
         patchState(store, { _listener: listener });
         // Set up event listener for window resize
-        const resizeListener = store._setupResizeListener();
-        patchState(store, { _resizeListener: resizeListener });
+        const resizeSubscription = store._setupResizeListener();
+        patchState(store, { _resizeListener: resizeSubscription });
     },
     onDestroy() {
         // Clean up event listeners when store is destroyed
@@ -750,7 +785,7 @@ withHooks((store, settingService = inject(AXPSettingService)) => ({
         if (listener) {
             store._removeSystemColorListener(listener);
         }
-        if (resizeListener) {
+        if (resizeListener instanceof Subscription) {
             store._removeResizeListener(resizeListener);
         }
     },
@@ -777,35 +812,35 @@ class AXPThemeSlotComponent {
         <ax-button-item-list>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Light)"
-            [text]="(t('theme.light') | async)!"
+            [text]="(t('theme-modes.light',{scope:'layout'}) | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-brightness"> </ax-icon>
+              <ax-icon icon="fa-light fa-brightness"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Dark)"
-            [text]="(t('theme.dark') | async)!"
+            [text]="(t('theme-modes.dark',{scope:'layout'}) | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-moon"> </ax-icon>
+              <ax-icon icon="fa-light fa-moon"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.System)"
-            [text]="(t('theme.system') | async)!"
+            [text]="(t('theme-modes.system',{scope:'layout'}) | async)!"
             [selected]="store.isSystemMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-desktop"> </ax-icon>
+              <ax-icon icon="fa-light fa-desktop"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
         </ax-button-item-list>
       </ax-dropdown-panel>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$1.AXTranslatorDirective, selector: "[translate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
@@ -825,29 +860,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         <ax-button-item-list>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Light)"
-            [text]="(t('theme.light') | async)!"
+            [text]="(t('theme-modes.light',{scope:'layout'}) | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-brightness"> </ax-icon>
+              <ax-icon icon="fa-light fa-brightness"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Dark)"
-            [text]="(t('theme.dark') | async)!"
+            [text]="(t('theme-modes.dark',{scope:'layout'}) | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-moon"> </ax-icon>
+              <ax-icon icon="fa-light fa-moon"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.System)"
-            [text]="(t('theme.system') | async)!"
+            [text]="(t('theme-modes.system',{scope:'layout'}) | async)!"
             [selected]="store.isSystemMode()"
           >
             <ax-prefix>
-              <ax-icon icon="fa-solid fa-desktop"> </ax-icon>
+              <ax-icon icon="fa-light fa-desktop"> </ax-icon>
             </ax-prefix>
           </ax-button-item>
         </ax-button-item-list>
@@ -858,177 +893,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-class AXPThemeSettingProvider {
-    constructor() {
-        this.pallets = inject(AXP_THEME_PALETTE_PROVIDER);
-    }
-    async provide(context) {
-        // Define the 'Appearance Settings' group
-        context.addGroup('appearance', 'Appearance Settings', 'Customize the overall look and feel of the application.', 'fa-light fa-palette')
-            // Add the 'Brightness & Color' section
-            .addSection('color', 'Brightness & Color', 'Adjust the theme settings, including brightness, colors, and modes.')
-            // Add the 'Theme Mode' setting
-            .addSetting({
-            key: AXPThemeLayoutSetting.Mode,
-            title: 'Theme Mode',
-            scope: 'U',
-            isInherited: true,
-            defaultValue: AXPThemeMode.Light,
-            valueTransforms: objectKeyValueTransforms('id'),
-            widget: {
-                type: AXPWidgetsCatalog.select,
-                options: {
-                    dataSource: Object.entries(AXPThemeMode).map(([key, value]) => ({
-                        id: value,
-                        title: key.charAt(0).toUpperCase() + key.slice(1).toLowerCase(),
-                    })),
-                },
-            },
-            description: 'Switch between Light and Dark themes for the application.',
-        })
-            // Add the 'Palette' setting
-            .addSetting({
-            key: AXPThemeLayoutSetting.Palette,
-            title: 'Palette',
-            scope: 'U',
-            isInherited: true,
-            defaultValue: 'default',
-            valueTransforms: objectKeyValueTransforms('name'),
-            widget: {
-                type: AXPWidgetsCatalog.select,
-                options: {
-                    valueField: 'name',
-                    dataSource: await this.pallets.getList(),
-                },
-            },
-            description: 'Choose a color palette for the application interface.',
-        })
-            // End the 'Brightness & Color' section
-            .endSection()
-            // Add the 'Scale & Layout' section
-            .addSection('layout', 'Scale & Layout', 'Customize the application’s layout and scaling options.')
-            // Add the 'Menu Orientation' setting
-            .addSetting({
-            key: AXPThemeLayoutSetting.MenuOrientation,
-            title: 'Menu Orientation',
-            scope: 'U',
-            isInherited: true,
-            defaultValue: 'vertical',
-            valueTransforms: objectKeyValueTransforms('id'),
-            widget: {
-                type: 'select-editor',
-                options: {
-                    dataSource: [
-                        { id: 'vertical', title: 'Vertical' },
-                        { id: 'horizontal', title: 'Horizontal' },
-                    ],
-                },
-            },
-            description: 'Set the menu orientation for the application.',
-        })
-            // Add the 'Font Style' setting
-            .addSetting({
-            key: AXPThemeLayoutSetting.Font,
-            title: 'Font Style',
-            scope: 'U',
-            isInherited: true,
-            defaultValue: 'system-ui',
-            valueTransforms: objectKeyValueTransforms('id'),
-            widget: {
-                type: 'select-editor',
-                options: {
-                    dataSource: [
-                        { id: 'system-ui', title: 'Default' },
-                        { id: 'serif', title: 'Serif' },
-                        { id: 'sans-serif', title: 'Sans-serif' },
-                        { id: 'monospace', title: 'Monospace' },
-                        { id: 'arial', title: 'Arial' },
-                        { id: 'verdana', title: 'Verdana' },
-                        { id: 'tahoma', title: 'Tahoma' },
-                        { id: 'times-new-roman', title: 'Times New Roman' },
-                        { id: 'georgia', title: 'Georgia' },
-                        { id: 'helvetica', title: 'Helvetica' },
-                        { id: 'calibri', title: 'Calibri' },
-                        { id: 'cursive', title: 'Cursive' },
-                    ],
-                },
-            },
-            description: 'Set the font style for application text.',
-        })
-            // Add the 'Font Size' setting
-            .addSetting({
-            key: AXPThemeLayoutSetting.FontSize,
-            title: 'Font Size',
-            scope: 'U',
-            isInherited: true,
-            defaultValue: 'medium',
-            valueTransforms: objectKeyValueTransforms('id'),
-            widget: {
-                type: 'select-editor',
-                options: {
-                    dataSource: [
-                        { id: 'small', title: 'Small' },
-                        { id: 'medium', title: 'Medium' },
-                        { id: 'large', title: 'Large' },
-                        { id: 'x-large', title: 'Extra Large' },
-                    ],
+const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
+    providedIn: 'root',
+    factory: async () => {
+        return new AXPThemePaletteProviderDefault();
+    },
+});
+class AXPThemePaletteProviderDefault {
+    getList() {
+        return Promise.resolve([
+            {
+                name: 'default',
+                title: 'Default',
+                path: '/assets/themes/palletes/default.css',
+                colors: {
+                    primary: '#113b53',
+                    secondary: '#1a6ab1',
+                    neutral: '#606c76',
+                    success: '#2d9c67',
+                    warning: '#e9a01b',
+                    danger: '#c02f1d',
+                    accents: ['#d6a7a6', '#a0897e', '#8bf4d9'],
+                    dark: '#2a2d30',
+                    light: '#ffffff',
                 },
             },
-            description: 'Adjust the font size for application text.',
-        })
-            // End the 'Scale & Layout' section
-            .endSection()
-            // End the 'Appearance Settings' group
-            .endGroup();
+        ]);
     }
 }
 
-class AXPThemeColorSelectionWidgetEditComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeColorSelectionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
-    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
-          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
-            item 1
-          </div>
-          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
-            item 1
+class AXPThemePaletteChooserWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.palettes = signal([]);
+        this.selectedPalette = signal(null);
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedPalette.set(this.palettes().find(p => p.name === this.getValue()) ?? this.palettes().find(p => p.name === 'default') ?? this.palettes()[0]);
+            }
+        });
+    }
+    #eff;
+    async ngOnInit() {
+        super.ngOnInit();
+        const palletsProviderInstance = await this.paletteService;
+        this.palettes.set(await palletsProviderInstance.getList());
+    }
+    onPaletteClick(palette) {
+        this.setValue(palette.name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPThemePaletteChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    @for (palette of palettes(); track palette.name) {
+      <div (click)="onPaletteClick(palette)" 
+           [class.--selected]="palette.name === selectedPalette()?.name">
+          <span>{{ palette.title }}</span>
+          <div >
+            <div [style.background-color]="palette.colors.primary" class="ax-end-7 ax-z-[2]"></div>
+            <div [style.background-color]="palette.colors.secondary" class="ax-end-3.5 ax-z-[1]"></div>
+            <div [style.background-color]="palette.colors.accents[0]" class="ax-end-0 ax-z-0"></div>
           </div>
-    </div>  
-    
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "directive", type: i1$1.AXSelectionGroupDirective, selector: "[axSelectionGroup]", inputs: ["multiple", "disable", "selectedKeys"], outputs: ["onSelectionChanged"], exportAs: ["axSelectionGroup"] }, { kind: "directive", type: i1$1.AXSelectionItemDirective, selector: "[axSelectionItem]", inputs: ["key"], outputs: ["onClick"], exportAs: ["axSelectionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      </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{height:3rem;min-width:100%}@media (min-width: 768px){:host>div{min-width:16rem}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:2rem;width:2rem;border-radius:9999px;border-width:1px;border-color:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: ` 
-    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
-          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
-            item 1
+            args: [{ template: ` 
+    @for (palette of palettes(); track palette.name) {
+      <div (click)="onPaletteClick(palette)" 
+           [class.--selected]="palette.name === selectedPalette()?.name">
+          <span>{{ palette.title }}</span>
+          <div >
+            <div [style.background-color]="palette.colors.primary" class="ax-end-7 ax-z-[2]"></div>
+            <div [style.background-color]="palette.colors.secondary" class="ax-end-3.5 ax-z-[1]"></div>
+            <div [style.background-color]="palette.colors.accents[0]" class="ax-end-0 ax-z-0"></div>
           </div>
-          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
-            item 1
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionModule], 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{height:3rem;min-width:100%}@media (min-width: 768px){:host>div{min-width:16rem}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:2rem;width:2rem;border-radius:9999px;border-width:1px;border-color:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
+        }] });
+
+var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPThemePaletteChooserWidgetComponent: AXPThemePaletteChooserWidgetComponent
+});
+
+const AXPThemePaletteChooserWidget = {
+    name: "theme-palette-chooser",
+    title: "Theme Palette Chooser",
+    icon: "fa-solid fa-square",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themePaletteChooserWidget_component; }).then((c) => c.AXPThemePaletteChooserWidgetComponent),
+        },
+    }
+};
+
+class AXPThemeModeChooserWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.modes = signal([
+            { id: AXPThemeMode.Light, icon: 'fa-light fa-brightness' },
+            { id: AXPThemeMode.Dark, icon: 'fa-light fa-moon' },
+            { id: AXPThemeMode.System, icon: 'fa-light fa-desktop' },
+        ]);
+        this.selectedMode = signal(null);
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedMode.set(this.modes().find(m => m.id === this.getValue()) ?? this.modes()[0]);
+            }
+        });
+    }
+    #eff;
+    onModeClick(mode) {
+        this.setValue(mode.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPThemeModeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    @for (mode of modes(); track mode.id) {
+      <div (click)="onModeClick(mode)" 
+           [class.--selected]="mode.id === selectedMode()?.id">
+          <div>
+            <i [class]="mode.icon"></i>
           </div>
-    </div>  
-    
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXSelectionModule],
-                }]
+          <span>{{ ('theme-modes.' + mode.id) | translate: { scope: 'layout' } | 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ template: ` 
+    @for (mode of modes(); track mode.id) {
+      <div (click)="onModeClick(mode)" 
+           [class.--selected]="mode.id === selectedMode()?.id">
+          <div>
+            <i [class]="mode.icon"></i>
+          </div>
+          <span>{{ ('theme-modes.' + mode.id) | translate: { scope: 'layout' } | async}}</span>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionModule, 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"] }]
         }] });
 
-var themeColorSelectionWidgetEdit_component = /*#__PURE__*/Object.freeze({
+var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPThemeColorSelectionWidgetEditComponent: AXPThemeColorSelectionWidgetEditComponent
+    AXPThemeModeChooserWidgetComponent: AXPThemeModeChooserWidgetComponent
 });
 
-const AXPThemeColorSelectionWidget = {
-    name: "theme-color-selection",
-    title: "Theme Color Selection",
+const AXPThemeModeChooserWidget = {
+    name: "theme-mode-chooser",
+    title: "Theme Mode Chooser",
     icon: "fa-solid fa-square",
     type: 'editor',
-    visible: false,
-    group: AXP_WIDGETS_LAYOUT_GROUP,
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themeModeChooserWidget_component; }).then((c) => c.AXPThemeModeChooserWidgetComponent),
+        },
+    }
+};
+
+class AXPMenuOrientationChooserWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.orientations = signal([
+            { id: 'vertical', icon: 'fa-regular fa-square-ellipsis-vertical' },
+            { id: 'horizontal', icon: 'fa-regular fa-square-ellipsis' },
+        ]);
+        this.selectedOrientation = signal(null);
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedOrientation.set(this.orientations().find(o => o.id === this.getValue()) ?? this.orientations()[0]);
+            }
+        });
+    }
+    #eff;
+    onOrientationClick(orientation) {
+        this.setValue(orientation.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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>
+            <i [class]="orientation.icon"></i>
+          </div>
+          <span>{{ ('menu-modes.' + orientation.id) | translate: { scope: 'layout' } | 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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>
+            <i [class]="orientation.icon"></i>
+          </div>
+          <span>{{ ('menu-modes.' + orientation.id) | translate: { scope: 'layout' } | async}}</span>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionModule, 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"] }]
+        }] });
+
+var menuOrientationChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMenuOrientationChooserWidgetComponent: AXPMenuOrientationChooserWidgetComponent
+});
+
+const AXPMenuOrientationChooserWidget = {
+    name: "menu-orientation-chooser",
+    title: "Menu Orientation Chooser",
+    icon: "fa-light fa-bars-staggered",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -1036,7 +1132,157 @@ const AXPThemeColorSelectionWidget = {
     ],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return themeColorSelectionWidgetEdit_component; }).then((c) => c.AXPThemeColorSelectionWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return menuOrientationChooserWidget_component; }).then((c) => c.AXPMenuOrientationChooserWidgetComponent),
+        },
+    }
+};
+
+class AXPFontStyleChooserWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.fonts = signal([
+            { id: 'system-ui', title: 'Default' },
+            { id: 'serif', title: 'Serif' },
+            { id: 'sans-serif', title: 'Sans-serif' },
+            { id: 'monospace', title: 'Monospace' },
+            { id: 'arial', title: 'Arial' },
+            { id: 'verdana', title: 'Verdana' },
+            { id: 'tahoma', title: 'Tahoma' },
+            { id: 'times-new-roman', title: 'Times New Roman' },
+            { id: 'georgia', title: 'Georgia' },
+            { id: 'helvetica', title: 'Helvetica' },
+            { id: 'calibri', title: 'Calibri' },
+            { id: 'cursive', title: 'Cursive' },
+        ]);
+        this.selectedFont = signal(null);
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedFont.set(this.fonts().find(f => f.id === this.getValue()) ?? this.fonts()[0]);
+            }
+        });
+    }
+    #eff;
+    onFontClick(font) {
+        this.setValue(font.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    @for (font of fonts(); track font.id) {
+      <div (click)="onFontClick(font)" 
+           [class.--selected]="font.id === selectedFont()?.id"
+           [style.font-family]="font.id">
+          <div>
+            <span >{{ font.title  }}</span>
+          </div>
+      </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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ template: ` 
+    @for (font of fonts(); track font.id) {
+      <div (click)="onFontClick(font)" 
+           [class.--selected]="font.id === selectedFont()?.id"
+           [style.font-family]="font.id">
+          <div>
+            <span >{{ font.title  }}</span>
+          </div>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionModule], 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}\n"] }]
+        }] });
+
+var fontStyleChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPFontStyleChooserWidgetComponent: AXPFontStyleChooserWidgetComponent
+});
+
+const AXPFontStyleChooserWidget = {
+    name: "font-style-chooser",
+    title: "Font Style Chooser",
+    icon: "fa-light fa-font",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return fontStyleChooserWidget_component; }).then((c) => c.AXPFontStyleChooserWidgetComponent),
+        },
+    }
+};
+
+class AXPFontSizeChooserWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.sizes = signal([
+            'small',
+            'medium',
+            'large',
+            'x-large',
+        ]);
+        this.selectedSize = signal(null);
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedSize.set(this.sizes().find(s => s === this.getValue()) ?? this.sizes()[0]);
+            }
+        });
+    }
+    #eff;
+    onSizeClick(size) {
+        this.setValue(size);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFontSizeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    @for (size of sizes(); track size) {
+      <div (click)="onSizeClick(size)" 
+           [style.font-size]="size"
+           [class.--selected]="size === selectedSize()">
+          <div>
+            <span >{{ ('font-sizes.' + size) | translate: { scope: 'layout' } | async}}</span>
+          </div>
+      </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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ template: ` 
+    @for (size of sizes(); track size) {
+      <div (click)="onSizeClick(size)" 
+           [style.font-size]="size"
+           [class.--selected]="size === selectedSize()">
+          <div>
+            <span >{{ ('font-sizes.' + size) | translate: { scope: 'layout' } | async}}</span>
+          </div>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionModule, 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}\n"] }]
+        }] });
+
+var fontSizeChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPFontSizeChooserWidgetComponent: AXPFontSizeChooserWidgetComponent
+});
+
+const AXPFontSizeChooserWidget = {
+    name: "font-size-chooser",
+    title: "Font Size Chooser",
+    icon: "fa-light fa-text-size",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return fontSizeChooserWidget_component; }).then((c) => c.AXPFontSizeChooserWidgetComponent),
         },
     }
 };
@@ -1052,12 +1298,16 @@ class AXPThemesSharedModule {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$2.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$1.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$1.AXPComponentSlotModule, i2$2.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
-                useClass: AXPThemeSettingProvider,
+                useFactory: async () => {
+                    const injector = inject(Injector);
+                    const provider = (await import('./acorex-platform-themes-shared-setting.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
+                    return new provider(injector);
+                },
                 multi: true
             }
         ], imports: [AXPComponentSlotModule.forRoot({
@@ -1071,7 +1321,11 @@ class AXPThemesSharedModule {
             }),
             AXPLayoutBuilderModule.forChild({
                 widgets: [
-                    AXPThemeColorSelectionWidget
+                    AXPThemePaletteChooserWidget,
+                    AXPThemeModeChooserWidget,
+                    AXPMenuOrientationChooserWidget,
+                    AXPFontSizeChooserWidget,
+                    AXPFontStyleChooserWidget
                 ]
             })] }); }
 }
@@ -1090,7 +1344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         }),
                         AXPLayoutBuilderModule.forChild({
                             widgets: [
-                                AXPThemeColorSelectionWidget
+                                AXPThemePaletteChooserWidget,
+                                AXPThemeModeChooserWidget,
+                                AXPMenuOrientationChooserWidget,
+                                AXPFontSizeChooserWidget,
+                                AXPFontStyleChooserWidget
                             ]
                         })
                     ],
@@ -1099,98 +1357,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     providers: [
                         {
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
-                            useClass: AXPThemeSettingProvider,
+                            useFactory: async () => {
+                                const injector = inject(Injector);
+                                const provider = (await import('./acorex-platform-themes-shared-setting.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
+                                return new provider(injector);
+                            },
                             multi: true
                         }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
-
-class AXPDrawerDirective {
-    #effect;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.opened = input(false);
-        this._opened = signal(false);
-        this.#effect = effect(() => {
-            this._opened.set(this.opened());
-        });
-        this.isOpen = computed(() => this._opened());
-        this.position = input('start');
-        this.mode = input('overlay');
-        this.width = input('300px');
-    }
-    ngOnInit() {
-        // Set initial styles
-        this.renderer.setStyle(this.el.nativeElement, 'position', 'absolute');
-        this.renderer.setStyle(this.el.nativeElement, 'top', '0');
-        this.renderer.setStyle(this.el.nativeElement, 'bottom', '0');
-        this.renderer.setStyle(this.el.nativeElement, 'height', '100%');
-        this.renderer.setStyle(this.el.nativeElement, 'transition', 'transform 0.3s ease-in-out');
-        // Setup effects for reactive updates
-        effect(() => {
-            const position = this.position();
-            const width = this.width();
-            const isOpen = this.isOpen();
-            const mode = this.mode();
-            // Set width
-            this.renderer.setStyle(this.el.nativeElement, 'width', width);
-            // Set position
-            if (position === 'start') {
-                this.renderer.setStyle(this.el.nativeElement, 'left', '0');
-                this.renderer.setStyle(this.el.nativeElement, 'right', null);
-                this.renderer.setStyle(this.el.nativeElement, 'transform', isOpen ? 'translateX(0)' : `translateX(-100%)`);
-            }
-            else {
-                this.renderer.setStyle(this.el.nativeElement, 'right', '0');
-                this.renderer.setStyle(this.el.nativeElement, 'left', null);
-                this.renderer.setStyle(this.el.nativeElement, 'transform', isOpen ? 'translateX(0)' : `translateX(100%)`);
-            }
-            // Handle push mode
-            if (mode === 'push') {
-                const container = this.el.nativeElement.parentElement;
-                if (container) {
-                    const translateX = isOpen ? (position === 'start' ? width : `-${width}`) : '0';
-                    this.renderer.setStyle(container, 'transition', 'transform 0.3s ease-in-out');
-                    this.renderer.setStyle(container, 'transform', `translateX(${translateX})`);
-                }
-            }
-        });
-    }
-    toggle() {
-        this._opened.set(!this._opened());
-    }
-    open() {
-        this._opened.set(true);
-    }
-    close() {
-        this._opened.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDrawerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: AXPDrawerDirective, isStandalone: true, selector: "[axpDrawer]", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.axp-drawer": "true", "class.axp-drawer-opened": "isOpen()", "class.axp-drawer-closed": "!isOpen()", "class.axp-drawer-overlay": "mode() === \"overlay\"", "class.axp-drawer-push": "mode() === \"push\"", "class.axp-drawer-start": "position() === \"start\"", "class.axp-drawer-end": "position() === \"end\"" } }, exportAs: ["axpDrawer"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDrawerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[axpDrawer]',
-                    standalone: true,
-                    host: {
-                        '[class.axp-drawer]': 'true',
-                        '[class.axp-drawer-opened]': 'isOpen()',
-                        '[class.axp-drawer-closed]': '!isOpen()',
-                        '[class.axp-drawer-overlay]': 'mode() === "overlay"',
-                        '[class.axp-drawer-push]': 'mode() === "push"',
-                        '[class.axp-drawer-start]': 'position() === "start"',
-                        '[class.axp-drawer-end]': 'position() === "end"',
-                    },
-                    exportAs: 'axpDrawer'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDeviceType, AXPDrawerDirective, AXPLayoutThemeService, AXPMenuOrientation, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutSetting, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
+export { AXPDeviceType, AXPLayoutThemeService, AXPMenuOrientation, AXPScreenSize, AXPSideMenuState, AXPTaskBadgeDirective, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutSetting, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map