@acorex/platform 19.1.3 → 19.1.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChild, computed, inject, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChild, computed, InjectionToken, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@acorex/components/button';
@@ -8,13 +8,18 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$1 from '@acorex/platform/common';
-import { AXPSettingValueProviderService, AXP_SETTING_DEFINITION_PROVIDER, AXPComponentSlotModule } from '@acorex/platform/common';
+import * as i1$2 from '@acorex/platform/common';
+import { AXPSettingScope, AXPSettingValueProviderService, AXP_SETTING_DEFINITION_PROVIDER, AXPComponentSlotModule } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { timer } from 'rxjs';
+import { timer, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import { objectKeyValueTransforms } from '@acorex/platform/layout/builder';
+import * as i2$1 from '@acorex/platform/layout/builder';
+import { objectKeyValueTransforms, AXPWidgetsCatalog, AXPWidgetComponent, AXP_WIDGETS_LAYOUT_GROUP, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@acorex/cdk/selection';
+import { AXSelectionModule } from '@acorex/cdk/selection';
+import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
 
 class AXPThemeLayoutBlockComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -304,17 +309,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
-    AXPThemeLayoutSetting["ThemeVariant"] = "layout:theme:variant";
-    AXPThemeLayoutSetting["ThemeSideMenu"] = "layout:theme:sidemenu";
+    AXPThemeLayoutSetting["Name"] = "layout:theme:name";
+    AXPThemeLayoutSetting["Layout"] = "layout:theme:layout";
+    AXPThemeLayoutSetting["Font"] = "layout:theme:font:family";
+    AXPThemeLayoutSetting["FontSize"] = "layout:theme:font:size";
+    AXPThemeLayoutSetting["Palette"] = "layout:theme:palette";
+    AXPThemeLayoutSetting["Mode"] = "layout:theme:mode";
+    AXPThemeLayoutSetting["SideMenuStatus"] = "layout:theme:sidemenu";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
 // Theme Enum
-var AXPThemeVariant;
-(function (AXPThemeVariant) {
-    AXPThemeVariant["Light"] = "light";
-    AXPThemeVariant["Dark"] = "dark";
-    AXPThemeVariant["System"] = "system";
-})(AXPThemeVariant || (AXPThemeVariant = {}));
+var AXPThemeMode;
+(function (AXPThemeMode) {
+    AXPThemeMode["Light"] = "light";
+    AXPThemeMode["Dark"] = "dark";
+    AXPThemeMode["System"] = "system";
+})(AXPThemeMode || (AXPThemeMode = {}));
 // Screen Size Enum
 var AXPScreenSize;
 (function (AXPScreenSize) {
@@ -335,12 +345,31 @@ var AXPSideMenuState;
     AXPSideMenuState["Opened"] = "opened";
     AXPSideMenuState["Closed"] = "closed";
 })(AXPSideMenuState || (AXPSideMenuState = {}));
+
+const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        return new AXPThemePaletteProviderDefault();
+    }
+});
+class AXPThemePaletteProviderDefault {
+    getList() {
+        return Promise.resolve([
+            {
+                name: 'default',
+                title: 'Default',
+                path: '/assets/themes/palletes/default.css',
+                colors: []
+            },
+        ]);
+    }
+}
+
 // ThemeStore - Manages theme settings, system changes, and loading states
 const AXPLayoutThemeService = signalStore({ providedIn: 'root' }, 
 // Initial State
 withState(() => {
-    const initialTheme = AXPThemeVariant.System;
-    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
     // Helper function to get the initial screen size
     const getScreenSize = () => {
         const width = window.innerWidth;
@@ -366,8 +395,13 @@ withState(() => {
         return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
     };
     const state = {
-        currentTheme: initialTheme,
-        systemTheme: (systemPrefersDark ? AXPThemeVariant.Dark : AXPThemeVariant.Light),
+        currentMode: AXPThemeMode.System,
+        currentPallete: 'default',
+        systemThemeMode: (isSystemDark ? AXPThemeMode.Dark : AXPThemeMode.Light),
+        font: {
+            family: 'system-ui',
+            size: 'medium'
+        },
         screenSize: getScreenSize(),
         deviceType: getDeviceType(),
         isTouchDevice: isTouchDevice(),
@@ -382,12 +416,12 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentTheme, systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading }) => ({
-    isDarkMode: computed(() => currentTheme() === AXPThemeVariant.Dark ||
-        (currentTheme() === AXPThemeVariant.System && systemTheme() === AXPThemeVariant.Dark)),
-    isLightMode: computed(() => currentTheme() === AXPThemeVariant.Light ||
-        (currentTheme() === AXPThemeVariant.System && systemTheme() === AXPThemeVariant.Light)),
-    isSystemMode: computed(() => currentTheme() === AXPThemeVariant.System),
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading }) => ({
+    isDarkMode: computed(() => 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),
     isSmall: computed(() => screenSize() === AXPScreenSize.Small),
     isMedium: computed(() => screenSize() === AXPScreenSize.Medium),
@@ -400,22 +434,37 @@ withComputed(({ currentTheme, systemTheme, screenSize, deviceType, isTouchDevice
     isNavigationLoading: computed(() => navigationLoading()),
 })), 
 // Methods for State Management
-withMethods((store, settingService = inject(AXPSettingValueProviderService)) => {
-    const applySettings = async () => {
+withMethods((store, settingService = inject(AXPSettingValueProviderService), pallets = inject(AXP_THEME_PALETTE_PROVIDER)) => {
+    const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
-        const settingTheme = (await settingService.get(AXPThemeLayoutSetting.ThemeVariant)) ?? AXPThemeVariant.Light;
-        patchState(store, { currentTheme: settingTheme });
-        const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.ThemeSideMenu)) ?? store.sideMenuState();
+        const settingThemeMode = (await settingService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
+        patchState(store, { currentMode: settingThemeMode });
+        //
+        const settingThemePallete = (await settingService.get(AXPThemeLayoutSetting.Palette)) ?? 'default';
+        patchState(store, { currentPallete: settingThemePallete });
+        //
+        const settingSideMenu = (await settingService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
         patchState(store, { sideMenuState: settingSideMenu });
-        updateHtmlClass(store.isDarkMode());
+        //
+        const fontFamily = await settingService.get(AXPThemeLayoutSetting.Font);
+        const fontSize = await settingService.get(AXPThemeLayoutSetting.FontSize);
+        patchState(store, { font: { family: fontFamily, size: fontSize } });
+        //
+        await _updateHtmlClass();
     };
     // Update HTML class based on theme
-    const updateHtmlClass = (dark) => {
+    const _updateHtmlClass = async () => {
         const html = document.getElementsByTagName('html')[0];
-        dark ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+        //
+        store.isDarkMode() ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+        //
+        html.style.fontFamily = store.font().family;
+        html.style.fontSize = store.font().size;
+        //
+        await _applyThemePalette(store.currentPallete());
     };
     // Update screen size based on window width
-    const updateScreenSize = () => {
+    const _updateScreenSize = () => {
         const width = window.innerWidth;
         let newScreenSize;
         if (width <= 600) {
@@ -431,33 +480,53 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
             patchState(store, { screenSize: newScreenSize });
             if (store.sideMenuState() !== AXPSideMenuState.Closed) {
                 patchState(store, { sideMenuState: newScreenSize === AXPScreenSize.Small ? AXPSideMenuState.Closed : AXPSideMenuState.Opened });
-                settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, store.sideMenuState());
+                settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
             }
         }
     };
+    // Helper method to apply a cached theme palette
+    const _applyThemePalette = async (name) => {
+        const pallete = (await pallets.getList()).find(c => c.name == name);
+        if (!pallete) {
+            return;
+        }
+        // Remove all existing theme-related link elements
+        const existingLinks = document.querySelectorAll('link[data-theme]');
+        existingLinks.forEach(link => document.head.removeChild(link));
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = pallete.path;
+        link.setAttribute('data-theme', name);
+        document.head.appendChild(link);
+        // Wait for the CSS file to load
+        await new Promise((resolve, reject) => {
+            link.onload = () => resolve();
+            link.onerror = () => reject(new Error(`Failed to load CSS file: ${pallete.path}`));
+        });
+    };
     const minimumDisplayTime = 500; // milliseconds
     return {
         // Change theme and update HTML class
-        changeTheme(theme) {
-            settingService.set(AXPThemeLayoutSetting.ThemeVariant, theme);
-            patchState(store, { currentTheme: theme });
-            updateHtmlClass(store.isDarkMode());
+        changeThemeMode(theme) {
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.Mode, theme);
+            patchState(store, { currentMode: theme });
+            _updateHtmlClass();
         },
         // Open side menu
         openSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Opened });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, AXPSideMenuState.Opened);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
         },
         // Close side menu
         closeSideMenu() {
             patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, AXPSideMenuState.Closed);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
         },
         // Toggle side menu state
         toggleSideMenu() {
             const newSideMenuState = store.sideMenuState() === AXPSideMenuState.Opened ? AXPSideMenuState.Closed : AXPSideMenuState.Opened;
             patchState(store, { sideMenuState: newSideMenuState });
-            settingService.set(AXPThemeLayoutSetting.ThemeSideMenu, newSideMenuState);
+            settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
         },
         // Set navigation loading state with a task counter
         setNavigationLoading(value) {
@@ -497,16 +566,15 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
                 }
             }
         },
-        // Apply the current theme to the HTML class
-        _applyCurrentTheme() {
-            updateHtmlClass(store.isDarkMode());
+        async loadSettings() {
+            await _applySettings();
         },
         // Set up event listener for system theme changes
         _setupSystemColorListener() {
             const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
             const listener = (e) => {
-                patchState(store, { systemTheme: e.matches ? AXPThemeVariant.Dark : AXPThemeVariant.Light });
-                updateHtmlClass(store.isDarkMode());
+                patchState(store, { systemThemeMode: e.matches ? AXPThemeMode.Dark : AXPThemeMode.Light });
+                _updateHtmlClass();
             };
             mediaQueryList.addEventListener('change', listener);
             return listener;
@@ -519,7 +587,7 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
         // Set up event listener for window resize
         _setupResizeListener() {
             const listener = () => {
-                updateScreenSize();
+                _updateScreenSize();
             };
             window.addEventListener('resize', listener);
             return listener;
@@ -528,17 +596,15 @@ withMethods((store, settingService = inject(AXPSettingValueProviderService)) =>
         _removeResizeListener(listener) {
             window.removeEventListener('resize', listener);
         },
-        async loadSettings() {
-            applySettings();
-        }
     };
 }), 
 // Lifecycle Hooks
 withHooks((store, settingService = inject(AXPSettingValueProviderService)) => ({
     onInit() {
         //
-        settingService.onChanged.subscribe(async (setting) => {
-            if (setting.keys.includes(AXPThemeLayoutSetting.ThemeVariant)) {
+        settingService.onChanged.pipe(filter(c => c.scope == AXPSettingScope.User)).subscribe(async (changes) => {
+            const keys = Object.values(AXPThemeLayoutSetting);
+            if (changes.keys.some((key) => keys.includes(key))) {
                 await store.loadSettings();
             }
         });
@@ -564,7 +630,7 @@ withHooks((store, settingService = inject(AXPSettingValueProviderService)) => ({
 class AXPThemeSlotComponent {
     constructor() {
         this.store = inject(AXPLayoutThemeService);
-        this.variants = AXPThemeVariant;
+        this.variants = AXPThemeMode;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
@@ -581,7 +647,7 @@ class AXPThemeSlotComponent {
       <ax-dropdown-panel *translate="let t">
         <ax-button-item-list>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Light)"
+            (onClick)="store.changeThemeMode(variants.Light)"
             [text]="(t('theme.light') | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
@@ -590,7 +656,7 @@ class AXPThemeSlotComponent {
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Dark)"
+            (onClick)="store.changeThemeMode(variants.Dark)"
             [text]="(t('theme.dark') | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
@@ -599,7 +665,7 @@ class AXPThemeSlotComponent {
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.System)"
+            (onClick)="store.changeThemeMode(variants.System)"
             [text]="(t('theme.system') | async)!"
             [selected]="store.isSystemMode()"
           >
@@ -629,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       <ax-dropdown-panel *translate="let t">
         <ax-button-item-list>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Light)"
+            (onClick)="store.changeThemeMode(variants.Light)"
             [text]="(t('theme.light') | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
@@ -638,7 +704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.Dark)"
+            (onClick)="store.changeThemeMode(variants.Dark)"
             [text]="(t('theme.dark') | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
@@ -647,7 +713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             </ax-prefix>
           </ax-button-item>
           <ax-button-item
-            (onClick)="store.changeTheme(variants.System)"
+            (onClick)="store.changeThemeMode(variants.System)"
             [text]="(t('theme.system') | async)!"
             [selected]="store.isSystemMode()"
           >
@@ -664,50 +730,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 
 class AXPThemeSettingProvider {
+    constructor() {
+        this.pallets = inject(AXP_THEME_PALETTE_PROVIDER);
+    }
     async provide(context) {
-        context.addGroup('common-settings', 'General Settings', 'General application settings.', 'fa-solid fa-gear-complex')
-            // General Settings Section
-            .addSection('general', 'General', 'General configurations for the application.')
-            .endSection()
-            .endGroup();
-        //
-        context
-            .group('common-settings')
-            ?.section('general')
-            ?.addSetting({
-            key: AXPThemeLayoutSetting.ThemeVariant,
-            title: 'Default Theme',
+        // Define the 'Appearance Settings' group
+        context.addGroup('appearance', 'Appearance Settings', 'Customize the overall look and feel of the application.', 'fa-solid fa-palette')
+            // Add the 'Brightness & Color' section
+            .addSection('color', 'Brightness & Color', 'Adjust the theme settings, including brightness, colors, and modes.')
+            // Add the 'Theme Mode' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Mode,
+            title: 'Theme Mode',
             scope: 'U',
             isInherited: true,
-            defaultValue: AXPThemeVariant.Light,
+            defaultValue: AXPThemeMode.Light,
             valueTransforms: objectKeyValueTransforms('id'),
             widget: {
-                type: 'select-editor',
+                type: AXPWidgetsCatalog.select,
                 options: {
-                    dataSource: Object.entries(AXPThemeVariant).map(([key, value]) => ({
+                    dataSource: Object.entries(AXPThemeMode).map(([key, value]) => ({
                         id: value,
                         title: key.charAt(0).toUpperCase() + key.slice(1).toLowerCase(),
                     })),
                 },
             },
-            description: 'Select the default theme for the application.',
-        });
+            description: 'Switch between Light and Dark themes for the application.',
+        })
+            // Add the 'Palette' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Palette,
+            title: 'Palette',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'default',
+            valueTransforms: objectKeyValueTransforms('name'),
+            widget: {
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    valueField: 'name',
+                    dataSource: await this.pallets.getList(),
+                },
+            },
+            description: 'Choose a color palette for the application interface.',
+        })
+            // End the 'Brightness & Color' section
+            .endSection()
+            // Add the 'Scale & Layout' section
+            .addSection('layout', 'Scale & Layout', 'Customize the application’s layout and scaling options.')
+            // Add the 'Font Style' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.Font,
+            title: 'Font Style',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'system-ui',
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: 'select-editor',
+                options: {
+                    dataSource: [
+                        { id: 'system-ui', title: 'Default' },
+                        { id: 'serif', title: 'Serif' },
+                        { id: 'sans-serif', title: 'Sans-serif' },
+                        { id: 'monospace', title: 'Monospace' },
+                        { id: 'arial', title: 'Arial' },
+                        { id: 'verdana', title: 'Verdana' },
+                        { id: 'tahoma', title: 'Tahoma' },
+                        { id: 'times-new-roman', title: 'Times New Roman' },
+                        { id: 'georgia', title: 'Georgia' },
+                        { id: 'helvetica', title: 'Helvetica' },
+                        { id: 'calibri', title: 'Calibri' },
+                        { id: 'cursive', title: 'Cursive' },
+                    ],
+                },
+            },
+            description: 'Set the font style for application text.',
+        })
+            // Add the 'Font Size' setting
+            .addSetting({
+            key: AXPThemeLayoutSetting.FontSize,
+            title: 'Font Size',
+            scope: 'U',
+            isInherited: true,
+            defaultValue: 'medium',
+            valueTransforms: objectKeyValueTransforms('id'),
+            widget: {
+                type: 'select-editor',
+                options: {
+                    dataSource: [
+                        { id: 'small', title: 'Small' },
+                        { id: 'medium', title: 'Medium' },
+                        { id: 'large', title: 'Large' },
+                        { id: 'x-large', title: 'Extra Large' },
+                    ],
+                },
+            },
+            description: 'Adjust the font size for application text.',
+        })
+            // End the 'Scale & Layout' section
+            .endSection()
+            // End the 'Appearance Settings' group
+            .endGroup();
     }
 }
 
+class AXPThemeColorSelectionWidgetEditComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPThemeColorSelectionWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` 
+    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
+          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
+            item 1
+          </div>
+          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
+            item 1
+          </div>
+    </div>  
+    
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionModule }, { kind: "directive", type: i1$1.AXSelectionGroupDirective, selector: "[axSelectionGroup]", inputs: ["multiple", "selectedKeys"], outputs: ["onSelectionChanged"], exportAs: ["axSelectionGroup"] }, { kind: "directive", type: i1$1.AXSelectionItemDirective, selector: "[axSelectionItem]", inputs: ["key"], outputs: ["onClick"], exportAs: ["axSelectionItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemeColorSelectionWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` 
+    <div axSelectionGroup   [multiple]="false"  [selectedKeys]="'1'" >
+          <div axSelectionItem #a="axSelectionItem" key="1" [class.ax-text-primary-500]="a.isActive()">
+            item 1
+          </div>
+          <div axSelectionItem #b="axSelectionItem" key="2" [class.ax-text-primary-500]="b.isActive()">
+            item 1
+          </div>
+    </div>  
+    
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule, AXSelectionModule],
+                }]
+        }] });
+
+var themeColorSelectionWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPThemeColorSelectionWidgetEditComponent: AXPThemeColorSelectionWidgetEditComponent
+});
+
+const AXPThemeColorSelectionWidget = {
+    name: "theme-color-selection",
+    title: "Theme Color Selection",
+    icon: "fa-solid fa-square",
+    type: 'editor',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themeColorSelectionWidgetEdit_component; }).then((c) => c.AXPThemeColorSelectionWidgetEditComponent),
+        },
+    }
+};
+
 class AXPThemesSharedModule {
     constructor(appInitService, injector) {
         const service = injector.get(AXPLayoutThemeService);
         appInitService.registerTask({
-            name: 'Settings',
-            statusText: 'Loading Settings ...',
+            name: 'layout-theme',
+            statusText: 'Applying layout theme settings ...',
             run: async () => {
                 await service.loadSettings();
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$1.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$1.AXPComponentSlotModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$2.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
@@ -722,6 +919,11 @@ class AXPThemesSharedModule {
                         component: AXPThemeSlotComponent,
                     },
                 ],
+            }),
+            AXPLayoutBuilderModule.forChild({
+                widgets: [
+                    AXPThemeColorSelectionWidget
+                ]
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
@@ -737,6 +939,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 },
                             ],
                         }),
+                        AXPLayoutBuilderModule.forChild({
+                            widgets: [
+                                AXPThemeColorSelectionWidget
+                            ]
+                        })
                     ],
                     exports: [],
                     declarations: [],
@@ -748,11 +955,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         }
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDeviceType, AXPLayoutThemeService, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionTemplateComponent, AXPThemeLayoutSideTemplateComponent, AXPThemeSlotComponent, AXPThemeVariant, AXPThemesSharedModule };
+export { AXPDeviceType, AXPLayoutThemeService, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionTemplateComponent, AXPThemeLayoutSideTemplateComponent, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map