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

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

@@ -7,33 +7,29 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, Component, InjectionToken, Injectable, signal, ChangeDetectionStrategy, effect, Input, Injector, NgModule } from '@angular/core';
+import { computed, inject, effect, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, Injector, NgModule } from '@angular/core';
 import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import * as i1$2 from '@acorex/platform/core';
-import { AXPScreenSize, AXPPlatformScope } from '@acorex/platform/core';
+import * as i1$3 from '@acorex/platform/core';
+import { AXPScreenSize, AXPDeviceService, AXPPlatformScope, AXPComponentSlotModule } from '@acorex/platform/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i3$1 from '@acorex/platform/layout/widget-core';
-import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import * as i2$3 from '@acorex/platform/layout/components';
-import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
-import * as i2$1 from '@acorex/components/form';
-import { AXFormModule } from '@acorex/components/form';
-import * as i4$1 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i1$1 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i5$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/layout/widgets';
-import { AXSelectionCdkModule } from '@acorex/cdk/selection';
+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$2 from '@acorex/components/button-group';
+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 { AXSelectionCdkModule } from '@acorex/cdk/selection';
+import * as i4$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$2 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import * as i1$2 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
@@ -45,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 = {}));
 
@@ -68,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
@@ -98,7 +116,11 @@ withState(() => {
         sideMenuState: (getInitialScreenSize() === AXPScreenSize.Large
             ? AXPSideMenuState.Opened
             : AXPSideMenuState.Closed),
-        sideMenuWidth: 288,
+        /** Ephemeral overlay drawer state on small/medium viewports; never persisted. */
+        overlaySideMenuOpen: false,
+        sideMenuWidth: AXP_SIDE_MENU_FULL_DEFAULT_WIDTH,
+        sideMenuCompactWidth: AXP_SIDE_MENU_COMPACT_WIDTH,
+        menuVerticalMode: AXPMenuVerticalMode.Full,
         menuOrientation: 'vertical',
         _listener: null,
         isPrinting: false,
@@ -106,24 +128,36 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, isPrinting, }) => ({
-    isDarkMode: computed(() => {
-        if (isPrinting()) {
-            return false;
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
+    const effectiveMenuVerticalMode = computed(() => {
+        if (!deviceService.isLarge()) {
+            return AXPMenuVerticalMode.Full;
         }
-        return (currentTheme() === AXPThemeMode.Dark ||
-            (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Dark));
-    }),
-    isLightMode: computed(() => currentTheme() === AXPThemeMode.Light ||
-        (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
-    isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
-    isSideMenuOpen: computed(() => sideMenuState() === AXPSideMenuState.Opened),
-    isOverlayLoading: computed(() => overlayLoading()),
-    isNavigationLoading: computed(() => navigationLoading()),
-    isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
-})), 
+        return normalizeMenuVerticalMode(menuVerticalMode(), AXPMenuVerticalMode.Full);
+    }, ...(ngDevMode ? [{ debugName: "effectiveMenuVerticalMode" }] : /* istanbul ignore next */ []));
+    return {
+        isDarkMode: computed(() => {
+            if (isPrinting()) {
+                return false;
+            }
+            return (currentTheme() === AXPThemeMode.Dark ||
+                (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Dark));
+        }),
+        isLightMode: computed(() => currentTheme() === AXPThemeMode.Light ||
+            (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
+        isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
+        isSideMenuOpen: computed(() => deviceService.isLarge()
+            ? sideMenuState() === AXPSideMenuState.Opened
+            : overlaySideMenuOpen()),
+        isOverlayLoading: computed(() => overlayLoading()),
+        isNavigationLoading: computed(() => navigationLoading()),
+        isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
+        effectiveMenuVerticalMode,
+        sideMenuDrawerWidth: computed(() => effectiveMenuVerticalMode() === AXPMenuVerticalMode.Compact ? sideMenuCompactWidth() : sideMenuWidth()),
+    };
+}), 
 // Methods for State Management
-withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService)) => {
+withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => {
     const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
         const settingThemeMode = (await settingsService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
@@ -139,12 +173,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
@@ -243,6 +284,15 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         }
     };
     const minimumDisplayTime = 500; // milliseconds
+    const setSideMenuOpen = (opened) => {
+        if (!deviceService.isLarge()) {
+            patchState(store, { overlaySideMenuOpen: opened });
+            return;
+        }
+        const sideMenuState = opened ? AXPSideMenuState.Opened : AXPSideMenuState.Closed;
+        patchState(store, { sideMenuState });
+        settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, sideMenuState);
+    };
     return {
         // Change theme and update HTML class
         changeThemeMode(theme) {
@@ -252,24 +302,36 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         },
         // Open side menu
         openSideMenu() {
-            patchState(store, { sideMenuState: AXPSideMenuState.Opened });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
+            setSideMenuOpen(true);
         },
         // Close side menu
         closeSideMenu() {
-            patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
+            setSideMenuOpen(false);
         },
-        // 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;
-            patchState(store, { sideMenuState: newSideMenuState });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
+            setSideMenuOpen(!store.isSideMenuOpen());
         },
         // Set navigation loading state with a task counter
         setNavigationLoading(value, delay) {
@@ -302,12 +364,28 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
     };
 }), 
 // Lifecycle Hooks
-withHooks((store, settingsService = inject(AXPSettingsService)) => ({
+withHooks((store, settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => ({
     onInit() {
-        //
-        settingsService.onChanged.pipe(filter((c) => c.scope == AXPPlatformScope.User)).subscribe(async (changes) => {
+        effect(() => {
+            if (!deviceService.isLarge()) {
+                patchState(store, { overlaySideMenuOpen: false });
+            }
+        });
+        settingsService.onChanged
+            .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']();
             }
         });
@@ -341,8 +419,8 @@ class AXPThemeSlotComponent {
         this.store = inject(AXPLayoutThemeService);
         this.variants = AXPThemeMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     <ax-button color="primary">
       <ax-icon
         class="fa-regular "
@@ -385,9 +463,9 @@ class AXPThemeSlotComponent {
         </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: "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", "closeParentOnClick", "lockOnLoading"], 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]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "closeParentOnClick", "lockOnLoading"], 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]" }, { 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: "20.3.12", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -434,7 +512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       </ax-dropdown-panel>
     </ax-button>
   `,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule]
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -467,505 +546,134 @@ class AXPThemePaletteProviderDefault {
     }
 }
 
-class AXPColorProvider {
-}
-function titleCase(str) {
-    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-}
-function generateDefaultColors() {
-    const colors = [];
-    const styles = ['primary', 'secondary', 'success', 'warning', 'danger'];
-    const variants = [
-        'lightest',
-        'lighter',
-        'light',
-        'surface',
-        'dark',
-        'darker',
-        'darkest',
-        // ,'default'
-    ];
-    for (const style of styles) {
-        for (const variant of variants) {
-            let name;
-            let colorClass;
-            // if (variant === 'default') {
-            //   name = `${style}-${variant}`;
-            //   colorClass = `ax-text-${style}-${variant}`;
-            // } else {
-            name = `${style}-${variant}`;
-            colorClass = `ax-text-${style}-on-${variant}`;
-            // }
-            colors.push({
-                title: titleCase(variant === 'surface' ? style : titleCase(name)),
-                name: name,
-                color: colorClass,
-                background: `ax-bg-${name}`,
-                border: `ax-border-${name}`,
-            });
-        }
-    }
-    return colors;
+//#region ---- Contracts barrel ----
+//#endregion
+
+//#region ----   Injection Tokens   ----
+/**
+ * Injection token for icon providers.
+ * Use multi: true to register multiple providers.
+ */
+const AXP_ICON_PROVIDER = new InjectionToken('AXP_ICON_PROVIDER');
+/**
+ * Injection token for icon style providers.
+ * Use multi: true to register multiple providers.
+ */
+const AXP_ICON_STYLE_PROVIDER = new InjectionToken('AXP_ICON_STYLE_PROVIDER');
+//#endregion
+
+//#endregion
+//#region ----   Abstract Providers   ----
+class AXPIconProvider {
 }
-const DEFAULT_COLORS = generateDefaultColors();
-class AXPColorProviderDefault extends AXPColorProvider {
-    async provide() {
-        return DEFAULT_COLORS;
-    }
+class AXPIconStyleProvider {
 }
-const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
-class AXPColorChooserService {
+//#endregion
+//#region ----   Service   ----
+class AXPIconChooserService {
     constructor() {
-        this.defaultProvider = new AXPColorProviderDefault();
-        this.providers = (() => {
-            const injected = inject(AXP_COLOR_PROVIDER, { optional: true });
-            if (!injected) {
-                return [this.defaultProvider];
-            }
-            const providers = Array.isArray(injected) ? injected : [injected];
-            return [...providers, this.defaultProvider];
-        })();
-        this.cache = null;
+        //#region ----   Properties   ----
+        this.iconProviders = inject(AXP_ICON_PROVIDER, { optional: true }) ?? [];
+        this.styleProviders = inject(AXP_ICON_STYLE_PROVIDER, { optional: true }) ?? [];
+        this.iconsCache = null;
+        this.stylesCache = null;
     }
-    async getColors() {
-        if (this.cache) {
-            return this.cache;
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Get all available icon styles from registered providers.
+     * Results are cached after first call.
+     */
+    async getStyles() {
+        if (this.stylesCache) {
+            return this.stylesCache;
+        }
+        const allStyles = [];
+        for (const provider of this.styleProviders) {
+            const result = await provider.provide();
+            allStyles.push(...result);
+        }
+        // Remove duplicates based on style name
+        const uniqueStyles = allStyles.filter((style, index, self) => index === self.findIndex((s) => s.name === style.name));
+        this.stylesCache = uniqueStyles;
+        return uniqueStyles;
+    }
+    /**
+     * Get all available icons from registered providers.
+     * Icons from multiple providers are merged, with duplicates removed.
+     * Results are cached after first call.
+     */
+    async getIcons() {
+        if (this.iconsCache) {
+            return this.iconsCache;
         }
-        const allColors = [];
-        for (const resolver of this.providers) {
-            const result = await resolver.provide();
-            allColors.push(...result);
+        const allIcons = [];
+        for (const provider of this.iconProviders) {
+            const result = await provider.provide();
+            allIcons.push(...result);
         }
-        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
-        this.cache = uniqueColors;
-        return uniqueColors;
+        // Remove duplicates based on icon name, keeping first occurrence
+        const uniqueIcons = allIcons.filter((icon, index, self) => index === self.findIndex((i) => i.name === icon.name));
+        this.iconsCache = uniqueIcons;
+        return uniqueIcons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorChooserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
-class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
+class AXPIconChooserPopupComponent extends AXBasePageComponent {
     constructor() {
         super(...arguments);
-        this.colorService = inject(AXPColorChooserService);
-        this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
-        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.selectedColor = computed(() => {
-            const value = this.getValue();
-            if (!value) {
-                return this.colors()[0];
-            }
-            // If value is a string in the format: "ax-text-* ax-bg-* ax-border-*"
-            if (typeof value === 'string') {
-                const parsed = this.parseStringValue(value);
-                if (parsed) {
-                    return parsed;
-                }
-                return this.colors()[0];
-            }
-            // Otherwise value is an object
-            return value.name;
-        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+        this.icons = [];
+        this.filteredIcons = [];
+        this.searchQuery = '';
+        this.viewModes = [
+            { value: 'square', text: '@general:widgets.icon-chooser.view-mode.square', icon: 'fa-solid fa-border-all' },
+            {
+                value: 'rectangle',
+                text: '@general:widgets.icon-chooser.view-mode.rectangle',
+                icon: 'fa-solid fa-list',
+            },
+        ];
+        this.selectedViewMode = 'square';
+        this.iconTypes = [];
+        this.selectedIconType = 'fa-solid';
+        this.popupService = inject(AXPIconChooserService);
     }
     async ngOnInit() {
-        const allColors = await this.colorService.getColors();
-        this.colors.set(allColors);
-        super.ngOnInit();
+        this.iconTypes = await this.popupService.getStyles();
+        this.icons = await this.popupService.getIcons();
+        this.applyFilters();
+        this.cdr.detectChanges();
     }
-    handleValueChange(event) {
-        if (event.isUserInteraction) {
-            if (!event.value) {
-                this.setValue(undefined);
-                return;
-            }
-            const color = event.component.selectedItems[0];
-            // Always store as ordered string: "color background border"
-            const stringValue = `${color.color} ${color.background} ${color.border}`;
-            this.setValue(stringValue);
-        }
+    handleSearch(event) {
+        this.searchQuery = event.value?.toLowerCase();
+        this.applyFilters();
     }
-    parseStringValue(value) {
-        const parts = value.trim().split(/\s+/);
-        if (parts.length !== 3) {
-            return null;
+    handleViewModeChange(mode) {
+        this.selectedViewMode = mode.value;
+    }
+    handleIconTypeChange(type) {
+        this.selectedIconType = type.name;
+        this.applyFilters();
+    }
+    applyFilters() {
+        let result = this.icons;
+        if (this.searchQuery) {
+            result = result.filter((icon) => icon.label.toLowerCase().includes(this.searchQuery) ||
+                icon.tags?.some((tag) => tag.toLowerCase().includes(this.searchQuery)));
         }
-        const [color, background, border] = parts;
-        const match = this.colors().find((c) => c.color === color && c.background === background && c.border === border);
-        return match?.name ?? null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
-      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
-        <ax-form-field>
-          <ax-select-box
-            [dataSource]="colors()"
-            textField="title"
-            valueField="name"
-            [placeholder]="placeholder()"
-            [itemTemplate]="customItemTemplate"
-            [ngModel]="selectedColor()"
-            (onValueChanged)="handleValueChange($event)"
-            [selectedTemplate]="customItemTemplate"
-          >
-            <ng-template #customItemTemplate let-item>
-              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
-                <span>{{ item.data.title }}</span>
-              </div>
-            </ng-template>
-            <ax-search-box look="fill"></ax-search-box>
-            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
-          </ax-select-box>
-        </ax-form-field>
-      </ax-form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$1.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-color-chooser-widget',
-                    template: `
-      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
-        <ax-form-field>
-          <ax-select-box
-            [dataSource]="colors()"
-            textField="title"
-            valueField="name"
-            [placeholder]="placeholder()"
-            [itemTemplate]="customItemTemplate"
-            [ngModel]="selectedColor()"
-            (onValueChanged)="handleValueChange($event)"
-            [selectedTemplate]="customItemTemplate"
-          >
-            <ng-template #customItemTemplate let-item>
-              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
-                <span>{{ item.data.title }}</span>
-              </div>
-            </ng-template>
-            <ax-search-box look="fill"></ax-search-box>
-            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
-          </ax-select-box>
-        </ax-form-field>
-      </ax-form>
-  `,
-                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-var themeColorChooserEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPColorChooserWidgetEditComponent: AXPColorChooserWidgetEditComponent
-});
-
-const AXPThemeColorChooserWidgetConfig = {
-    name: 'theme-color-chooser',
-    title: 'Theme Color Chooser',
-    icon: 'fa-solid fa-palette',
-    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 themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
-        },
-        column: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-Dz0cylyQ.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
-        },
-        view: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-DY0JtT1v.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
-        },
-    },
-};
-
-class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.sizes = signal(['small', 'medium', 'large', 'x-large'], ...(ngDevMode ? [{ debugName: "sizes" }] : []));
-        this.selectedSize = signal(null, ...(ngDevMode ? [{ debugName: "selectedSize" }] : []));
-        this.#eff = effect(() => {
-            if (this.getValue()) {
-                this.selectedSize.set(this.sizes().find((s) => s === this.getValue()) ?? this.sizes()[0]);
-            }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
-    }
-    #eff;
-    onSizeClick(size) {
-        this.setValue(size);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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>{{ '@layout:terms.font-sizes.' + size | translate | 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: "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: "20.3.12", 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>{{ '@layout:terms.font-sizes.' + size | translate | async }}</span>
-        </div>
-      </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}\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),
-        },
-    }
-};
-
-class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
-    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' },
-            { id: 'vazirmatn', title: 'Vazir وزیر' },
-        ], ...(ngDevMode ? [{ debugName: "fonts" }] : []));
-        this.selectedFont = signal(null, ...(ngDevMode ? [{ debugName: "selectedFont" }] : []));
-        this.#eff = effect(() => {
-            if (this.getValue()) {
-                this.selectedFont.set(this.fonts().find((f) => f.id === this.getValue()) ?? this.fonts()[0]);
-            }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
-    }
-    #eff;
-    onFontClick(font) {
-        this.setValue(font.id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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: [FormsModule, AXSelectionCdkModule], 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),
-        },
-    }
-};
-
-//#region ----   Injection Tokens   ----
-/**
- * Injection token for icon providers.
- * Use multi: true to register multiple providers.
- */
-const AXP_ICON_PROVIDER = new InjectionToken('AXP_ICON_PROVIDER');
-/**
- * Injection token for icon style providers.
- * Use multi: true to register multiple providers.
- */
-const AXP_ICON_STYLE_PROVIDER = new InjectionToken('AXP_ICON_STYLE_PROVIDER');
-//#endregion
-
-//#endregion
-//#region ----   Abstract Providers   ----
-class AXPIconProvider {
-}
-class AXPIconStyleProvider {
-}
-//#endregion
-//#region ----   Service   ----
-class AXPIconChooserService {
-    constructor() {
-        //#region ----   Properties   ----
-        this.iconProviders = inject(AXP_ICON_PROVIDER, { optional: true }) ?? [];
-        this.styleProviders = inject(AXP_ICON_STYLE_PROVIDER, { optional: true }) ?? [];
-        this.iconsCache = null;
-        this.stylesCache = null;
-    }
-    //#endregion
-    //#region ----   Public Methods   ----
-    /**
-     * Get all available icon styles from registered providers.
-     * Results are cached after first call.
-     */
-    async getStyles() {
-        if (this.stylesCache) {
-            return this.stylesCache;
-        }
-        const allStyles = [];
-        for (const provider of this.styleProviders) {
-            const result = await provider.provide();
-            allStyles.push(...result);
-        }
-        // Remove duplicates based on style name
-        const uniqueStyles = allStyles.filter((style, index, self) => index === self.findIndex((s) => s.name === style.name));
-        this.stylesCache = uniqueStyles;
-        return uniqueStyles;
-    }
-    /**
-     * Get all available icons from registered providers.
-     * Icons from multiple providers are merged, with duplicates removed.
-     * Results are cached after first call.
-     */
-    async getIcons() {
-        if (this.iconsCache) {
-            return this.iconsCache;
-        }
-        const allIcons = [];
-        for (const provider of this.iconProviders) {
-            const result = await provider.provide();
-            allIcons.push(...result);
-        }
-        // Remove duplicates based on icon name, keeping first occurrence
-        const uniqueIcons = allIcons.filter((icon, index, self) => index === self.findIndex((i) => i.name === icon.name));
-        this.iconsCache = uniqueIcons;
-        return uniqueIcons;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class AXPIconChooserPopupComponent extends AXBasePageComponent {
-    constructor() {
-        super(...arguments);
-        this.icons = [];
-        this.filteredIcons = [];
-        this.searchQuery = '';
-        this.viewModes = [
-            { value: 'square', text: '@general:widgets.icon-chooser.view-mode.square', icon: 'fa-solid fa-border-all' },
-            {
-                value: 'rectangle',
-                text: '@general:widgets.icon-chooser.view-mode.rectangle',
-                icon: 'fa-solid fa-list',
-            },
-        ];
-        this.selectedViewMode = 'square';
-        this.iconTypes = [];
-        this.selectedIconType = 'fa-solid';
-        this.popupService = inject(AXPIconChooserService);
-    }
-    async ngOnInit() {
-        this.iconTypes = await this.popupService.getStyles();
-        this.icons = await this.popupService.getIcons();
-        this.applyFilters();
-        this.cdr.detectChanges();
-    }
-    handleSearch(event) {
-        this.searchQuery = event.value?.toLowerCase();
-        this.applyFilters();
-    }
-    handleViewModeChange(mode) {
-        this.selectedViewMode = mode.value;
-    }
-    handleIconTypeChange(type) {
-        this.selectedIconType = type.name;
-        this.applyFilters();
-    }
-    applyFilters() {
-        let result = this.icons;
-        if (this.searchQuery) {
-            result = result.filter((icon) => icon.label.toLowerCase().includes(this.searchQuery) ||
-                icon.tags?.some((tag) => tag.toLowerCase().includes(this.searchQuery)));
-        }
-        result = result.filter((icon) => {
-            if (!icon.supportedStyle || icon.supportedStyle.length === 0) {
-                return true;
-            }
-            return icon.supportedStyle.includes(this.selectedIconType);
-        });
-        this.filteredIcons = result;
+        result = result.filter((icon) => {
+            if (!icon.supportedStyle || icon.supportedStyle.length === 0) {
+                return true;
+            }
+            return icon.supportedStyle.includes(this.selectedIconType);
+        });
+        this.filteredIcons = result;
     }
     selectIcon(icon) {
         this.close({
@@ -977,8 +685,8 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
     getIconClass(icon) {
         return `${this.selectedIconType} fa-${icon.name}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-flex-col ax-h-full ax-bg-lightest">
       <!-- Fixed Header Section -->
       <div class="ax-sticky ax-top-0 ax-z-10 ax-bg-lightest ax-border-b ax-p-4 ax-gap-4 ax-flex ax-flex-col">
@@ -1053,9 +761,9 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "20.3.12", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1160,7 +868,7 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
                 }
             }
             return value;
-        }, ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "computedValue" }] : /* istanbul ignore next */ []));
     }
     async openPopup() {
         const result = await this.popupService.open(AXPIconChooserPopupComponent, {
@@ -1185,8 +893,8 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
     editIcon() {
         this.openPopup();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPIconChooserWidgetEditComponent, isStandalone: true, selector: "ax-icon-chooser-edit", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIconChooserWidgetEditComponent, isStandalone: true, selector: "ax-icon-chooser-edit", usesInheritance: true, ngImport: i0, template: `
     <div
       class="ax-grid ax-grid-cols-[6rem_auto] ax-items-center ax-rounded-md ax-text-3xl ax-w-fit"
       [class.ax-border]="getValue()"
@@ -1217,7 +925,7 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
     </div>
    `, isInline: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-icon-chooser-edit', template: `
     <div
@@ -1259,7 +967,7 @@ var iconChooserEdit_component = /*#__PURE__*/Object.freeze({
 const AXPIconChooserWidget = {
     name: 'icon-chooser',
     title: 'Icon Chooser',
-    icon: 'fa-solid fa-icons',
+    icon: 'fa-light fa-icons',
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
@@ -1268,10 +976,10 @@ const AXPIconChooserWidget = {
             component: () => Promise.resolve().then(function () { return iconChooserEdit_component; }).then((c) => c.AXPIconChooserWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-themes-shared-icon-chooser-column.component-C0EpfU2k.mjs').then((c) => c.AXPIconChooserWidgetColumnComponent),
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-column.component-CqkWJYdv.mjs').then((c) => c.AXPIconChooserWidgetColumnComponent),
         },
         view: {
-            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-9W52W6Nu.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-BOTuLdWN.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
         },
     },
 };
@@ -1814,50 +1522,207 @@ function provideCustomIconStyleProvider(providerClass) {
         multi: true,
     };
 }
-//#endregion
+//#endregion
+
+class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.sizes = signal(['small', 'medium', 'large', 'x-large'], ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+        this.selectedSize = signal(null, ...(ngDevMode ? [{ debugName: "selectedSize" }] : /* istanbul ignore next */ []));
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedSize.set(this.sizes().find((s) => s === this.getValue()) ?? this.sizes()[0]);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onSizeClick(size) {
+        this.setValue(size);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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>{{ '@layout:terms.font-sizes.' + size | translate | 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: "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: 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>{{ '@layout:terms.font-sizes.' + size | translate | async }}</span>
+        </div>
+      </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}\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),
+        },
+    }
+};
+
+class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
+    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' },
+            { id: 'vazirmatn', title: 'Vazir وزیر' },
+        ], ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
+        this.selectedFont = signal(null, ...(ngDevMode ? [{ debugName: "selectedFont" }] : /* istanbul ignore next */ []));
+        this.#eff = effect(() => {
+            if (this.getValue()) {
+                this.selectedFont.set(this.fonts().find((f) => f.id === this.getValue()) ?? this.fonts()[0]);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onFontClick(font) {
+        this.setValue(font.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: [FormsModule, AXSelectionCdkModule], 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 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" }] : []));
-        this.selectedOrientation = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrientation" }] : []));
+        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" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     onOrientationClick(orientation) {
         this.setValue(orientation.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (orientation of orientations(); track orientation.id) {
       <div (click)="onOrientationClick(orientation)" [class.--selected]="orientation.id === selectedOrientation()?.id">
-        <div>
+        @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: "20.3.12", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
+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({
@@ -1883,6 +1748,318 @@ const AXPMenuOrientationChooserWidget = {
     }
 };
 
+//#endregion
+//#region ---- Color utilities ----
+function hexToRgb(hex) {
+    const normalized = hex.trim().replace(/^#/, '');
+    const full = normalized.length === 3
+        ? normalized
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : normalized;
+    return [
+        parseInt(full.slice(0, 2), 16),
+        parseInt(full.slice(2, 4), 16),
+        parseInt(full.slice(4, 6), 16),
+    ];
+}
+function relativeLuminance(hex) {
+    const [r, g, b] = hexToRgb(hex).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastForeground(backgroundHex) {
+    return relativeLuminance(backgroundHex) > 0.55 ? '#171717' : '#ffffff';
+}
+function titleCase(str) {
+    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
+}
+//#endregion
+//#region ---- Surface variants (palette-synchronized) ----
+/**
+ * Seven tonal steps per semantic color. Backgrounds are mixed in RGB using the **same palette’s**
+ * canvas `light` and `dark` as poles so swatches stay aligned with `AXPThemePaletteProvider` data.
+ */
+const SURFACE_VARIANTS = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+function styleTitlePrefix(style) {
+    const accentMatch = /^accent(\d+)$/.exec(style);
+    if (accentMatch) {
+        return `Accent ${accentMatch[1]}`;
+    }
+    return titleCase(style);
+}
+function surfaceVariantTitle(style, variant) {
+    if (variant === 'surface') {
+        return styleTitlePrefix(style);
+    }
+    return `${styleTitlePrefix(style)} ${titleCase(variant)}`;
+}
+/** Tailwind utility triplet stored by theme-color-chooser and outcome display rules. */
+function buildThemeSurfaceColorTriplet(styleKey, variant) {
+    return {
+        color: `ax-text-${styleKey}-on-${variant}`,
+        background: `ax-bg-${styleKey}-${variant}`,
+        border: `ax-border-${styleKey}-${variant}`,
+    };
+}
+/** Ordered `"foreground background border"` string for theme-color-chooser values. */
+function buildThemeSurfaceColorValue(styleKey, variant = 'lightest') {
+    const triplet = buildThemeSurfaceColorTriplet(styleKey, variant);
+    return `${triplet.color} ${triplet.background} ${triplet.border}`;
+}
+function pushVariantScale(entries, styleKey, _baseHex, _canvas) {
+    for (const variant of SURFACE_VARIANTS) {
+        const name = `${styleKey}-${variant}`;
+        entries.push({
+            title: surfaceVariantTitle(styleKey, variant),
+            name,
+            ...buildThemeSurfaceColorTriplet(styleKey, variant),
+        });
+    }
+}
+function pushFlatSwatch(entries, title, name, hex) {
+    const color = contrastForeground(hex);
+    entries.push({ title, name, color, background: hex, border: hex });
+}
+/**
+ * Builds the full chooser list from a single `AXPThemePalette` (colors object only).
+ */
+function buildColorsFromThemePalette(palette) {
+    const colors = palette.colors;
+    const canvas = { light: colors.light, dark: colors.dark };
+    const entries = [];
+    const core = ['primary', 'secondary', 'success', 'warning', 'danger'];
+    for (const key of core) {
+        pushVariantScale(entries, key, colors[key], canvas);
+    }
+    const neutral = colors.neutral;
+    if (neutral) {
+        pushVariantScale(entries, 'neutral', neutral, canvas);
+    }
+    colors.accents.forEach((hex, index) => {
+        pushVariantScale(entries, `accent${index + 1}`, hex, canvas);
+    });
+    pushFlatSwatch(entries, 'Canvas Light', 'canvas-light', colors.light);
+    pushFlatSwatch(entries, 'Canvas Dark', 'canvas-dark', colors.dark);
+    return entries;
+}
+//#endregion
+//#region ---- Service ----
+class AXPColorChooserService {
+    constructor() {
+        this.themeStore = inject(AXPLayoutThemeService);
+        this.palettePromise = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.cacheKey = null;
+        this.cache = null;
+    }
+    async getColors() {
+        const paletteName = this.themeStore.currentPalette();
+        if (this.cache && this.cacheKey === paletteName) {
+            return this.cache;
+        }
+        const provider = await this.palettePromise;
+        const list = await provider.getList();
+        const palette = list.find((p) => p.name === paletteName) ?? list.find((p) => p.name === 'default') ?? list[0] ?? null;
+        const colors = palette ? buildColorsFromThemePalette(palette) : [];
+        this.cacheKey = paletteName;
+        this.cache = colors;
+        return colors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colorService = inject(AXPColorChooserService);
+        this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.selectedColor = computed(() => {
+            const value = this.getValue();
+            const fallbackName = () => this.colors()[0]?.name;
+            if (!value) {
+                return fallbackName();
+            }
+            if (typeof value === 'string') {
+                const parsed = this.parseStringValue(value);
+                if (parsed) {
+                    return parsed;
+                }
+                return fallbackName();
+            }
+            return value.name;
+        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        const allColors = await this.colorService.getColors();
+        this.colors.set(allColors);
+        super.ngOnInit();
+    }
+    handleValueChange(event) {
+        if (event.isUserInteraction) {
+            if (!event.value) {
+                this.setValue(undefined);
+                return;
+            }
+            const color = event.component.selectedItems[0];
+            // Always store as ordered string: "color background border"
+            const stringValue = `${color.color} ${color.background} ${color.border}`;
+            this.setValue(stringValue);
+        }
+    }
+    isHexSwatch(color) {
+        return color.background.startsWith('#');
+    }
+    parseStringValue(value) {
+        const parts = value.trim().split(/\s+/);
+        if (parts.length !== 3) {
+            return null;
+        }
+        const [color, background, border] = parts;
+        const exactMatch = this.colors().find((entry) => entry.color === color && entry.background === background && entry.border === border);
+        if (exactMatch) {
+            return exactMatch.name;
+        }
+        const backgroundMatch = /^ax-bg-(.+)-(.+)$/.exec(background);
+        if (backgroundMatch) {
+            const name = `${backgroundMatch[1]}-${backgroundMatch[2]}`;
+            if (this.colors().some((entry) => entry.name === name)) {
+                return name;
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", host: { classAttribute: "ax-block ax-flex-1 ax-w-full" }, usesInheritance: true, ngImport: i0, template: `
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="placeholder()"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="selectedColor()"
+            (onValueChanged)="handleValueChange($event)"
+            [selectedTemplate]="customItemTemplate"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                @if (isHexSwatch(item.data)) {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-solid"
+                    [style.background-color]="item.data.background"
+                    [style.border-color]="item.data.border"
+                    [style.color]="item.data.color"
+                  >
+                    <span>Aa</span>
+                  </div>
+                } @else {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                    [class]="item.data.background"
+                  >
+                    <span [class]="item.data.color">Aa</span>
+                  </div>
+                }
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-chooser-widget',
+                    template: `
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="placeholder()"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="selectedColor()"
+            (onValueChanged)="handleValueChange($event)"
+            [selectedTemplate]="customItemTemplate"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                @if (isHexSwatch(item.data)) {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-solid"
+                    [style.background-color]="item.data.background"
+                    [style.border-color]="item.data.border"
+                    [style.color]="item.data.color"
+                  >
+                    <span>Aa</span>
+                  </div>
+                } @else {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                    [class]="item.data.background"
+                  >
+                    <span [class]="item.data.color">Aa</span>
+                  </div>
+                }
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+  `,
+                    host: {
+                        class: 'ax-block ax-flex-1 ax-w-full',
+                    },
+                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var themeColorChooserEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPColorChooserWidgetEditComponent: AXPColorChooserWidgetEditComponent
+});
+
+const AXPThemeColorChooserWidgetConfig = {
+    name: 'theme-color-chooser',
+    title: 'Theme Color Chooser',
+    icon: 'fa-light fa-palette',
+    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 themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
+        },
+        column: {
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-D566Kdvy.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+        },
+        view: {
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-D7-rCGl7.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+        },
+    },
+};
+
 class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -1890,20 +2067,20 @@ class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
             { id: AXPThemeMode.Light, icon: 'fa-light fa-brightness' },
             { id: AXPThemeMode.Dark, icon: 'fa-light fa-moon' },
             { id: AXPThemeMode.System, icon: 'fa-light fa-desktop' },
-        ], ...(ngDevMode ? [{ debugName: "modes" }] : []));
-        this.selectedMode = signal(null, ...(ngDevMode ? [{ debugName: "selectedMode" }] : []));
+        ], ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+        this.selectedMode = signal(null, ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.getValue()) {
                 this.selectedMode.set(this.modes().find((m) => m.id === this.getValue()) ?? this.modes()[0]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     onModeClick(mode) {
         this.setValue(mode.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPThemeModeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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>
@@ -1914,7 +2091,7 @@ class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
     }
   `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (mode of modes(); track mode.id) {
@@ -1936,7 +2113,7 @@ var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
 const AXPThemeModeChooserWidget = {
     name: "theme-mode-chooser",
     title: "Theme Mode Chooser",
-    icon: "fa-solid fa-square",
+    icon: "fa-light fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -1955,15 +2132,15 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
-        this.palettes = signal([], ...(ngDevMode ? [{ debugName: "palettes" }] : []));
-        this.selectedPalette = signal(null, ...(ngDevMode ? [{ debugName: "selectedPalette" }] : []));
+        this.palettes = signal([], ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
+        this.selectedPalette = signal(null, ...(ngDevMode ? [{ debugName: "selectedPalette" }] : /* istanbul ignore next */ []));
         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]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     async ngOnInit() {
@@ -1974,8 +2151,8 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     onPaletteClick(palette) {
         this.setValue(palette.name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPThemePaletteChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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>
@@ -1986,9 +2163,9 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
         </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}: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:#ffffff80;--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: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;width:100%;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:#ffffff80;--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: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (palette of palettes(); track palette.name) {
@@ -2001,7 +2178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         </div>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXSelectionCdkModule], 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:#ffffff80;--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"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXSelectionCdkModule], styles: [":host{display:flex;width:100%;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:#ffffff80;--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({
@@ -2012,7 +2189,7 @@ var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
 const AXPThemePaletteChooserWidget = {
     name: "theme-palette-chooser",
     title: "Theme Palette Chooser",
-    icon: "fa-solid fa-square",
+    icon: "fa-light fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -2027,26 +2204,49 @@ const AXPThemePaletteChooserWidget = {
     }
 };
 
+//#endregion
+//#region ----   Theme Widgets Provider   ----
+const WIDGETS = [
+    AXPThemePaletteChooserWidget,
+    AXPThemeModeChooserWidget,
+    AXPMenuOrientationChooserWidget,
+    AXPFontSizeChooserWidget,
+    AXPFontStyleChooserWidget,
+    AXPIconChooserWidget,
+    AXPThemeColorChooserWidgetConfig,
+];
+class AXPThemesSharedWidgetsProvider {
+    getWidgets() {
+        return WIDGETS;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider, decorators: [{
+            type: Injectable
+        }] });
+
 class AXPThemesSharedModule {
     constructor(appInitService, injector) {
         const service = injector.get(AXPLayoutThemeService);
         appInitService.registerTask({
             name: 'layout-theme',
-            statusText: 'Applying layout theme settings ...',
+            statusText: '@layout:app-startup.applying-theme-settings',
             priority: 100,
             run: async () => {
                 await service.loadSettings();
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", 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: "20.3.12", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$3.AXPComponentSlotModule, i3$1.AXPWidgetCoreModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemesSharedModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$3.AXPComponentSlotModule, AXPWidgetCoreModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, providers: [
+            { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXPThemesSharedWidgetsProvider, multi: true },
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -2061,19 +2261,9 @@ class AXPThemesSharedModule {
                     },
                 ],
             }),
-            AXPWidgetCoreModule.forChild({
-                widgets: [
-                    AXPThemePaletteChooserWidget,
-                    AXPThemeModeChooserWidget,
-                    AXPMenuOrientationChooserWidget,
-                    AXPFontSizeChooserWidget,
-                    AXPFontStyleChooserWidget,
-                    AXPIconChooserWidget,
-                    AXPThemeColorChooserWidgetConfig,
-                ],
-            })] }); }
+            AXPWidgetCoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2086,26 +2276,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                                 },
                             ],
                         }),
-                        AXPWidgetCoreModule.forChild({
-                            widgets: [
-                                AXPThemePaletteChooserWidget,
-                                AXPThemeModeChooserWidget,
-                                AXPMenuOrientationChooserWidget,
-                                AXPFontSizeChooserWidget,
-                                AXPFontStyleChooserWidget,
-                                AXPIconChooserWidget,
-                                AXPThemeColorChooserWidgetConfig,
-                            ],
-                        }),
+                        AXPWidgetCoreModule,
                     ],
                     exports: [],
                     declarations: [],
                     providers: [
+                        { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXPThemesSharedWidgetsProvider, multi: true },
                         {
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useFactory: async () => {
                                 const injector = inject(Injector);
-                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,
@@ -2113,11 +2294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         ...provideDefaultIconChooser(),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$3.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * 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