@acorex/platform 0.0.0-ACOREX

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

@@ -0,0 +1,2125 @@
+import * as i2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, inject, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, effect, Injector, NgModule } from '@angular/core';
+import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import * as i1$3 from '@acorex/platform/core';
+import { AXPScreenSize, 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 { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i2$1 from '@acorex/components/button-group';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i1$1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/layout/widgets';
+import { AXSelectionCdkModule } from '@acorex/cdk/selection';
+import * as i5$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) {
+    AXPThemeLayoutSetting["Name"] = "Common:Setting:Layout.Name";
+    AXPThemeLayoutSetting["Layout"] = "Common:Setting:Layout.Layout";
+    AXPThemeLayoutSetting["Font"] = "Common:Setting:Layout.Font.Family";
+    AXPThemeLayoutSetting["FontSize"] = "Common:Setting:Layout.Font.Size";
+    AXPThemeLayoutSetting["Palette"] = "Common:Setting:Layout.Palette";
+    AXPThemeLayoutSetting["Mode"] = "Common:Setting:Layout.Mode";
+    AXPThemeLayoutSetting["SideMenuStatus"] = "Common:Setting:Layout.SideMenu.Status";
+    AXPThemeLayoutSetting["SideMenuWidth"] = "Common:Setting:Layout.SideMenu.Width";
+    AXPThemeLayoutSetting["MenuOrientation"] = "Common:Setting:Layout.RootMenu.Direction";
+    AXPThemeLayoutSetting["MenuBadgeVisible"] = "Common:Setting:Layout.RootMenu.Badge";
+})(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
+
+// Theme Enum
+var AXPThemeMode;
+(function (AXPThemeMode) {
+    AXPThemeMode["Light"] = "light";
+    AXPThemeMode["Dark"] = "dark";
+    AXPThemeMode["System"] = "system";
+})(AXPThemeMode || (AXPThemeMode = {}));
+// Side Menu State Enum
+var AXPSideMenuState;
+(function (AXPSideMenuState) {
+    AXPSideMenuState["Opened"] = "opened";
+    AXPSideMenuState["Closed"] = "closed";
+})(AXPSideMenuState || (AXPSideMenuState = {}));
+// Menu Orientation Enum
+var AXPMenuOrientation;
+(function (AXPMenuOrientation) {
+    AXPMenuOrientation["Vertical"] = "vertical";
+    AXPMenuOrientation["Horizontal"] = "horizontal";
+})(AXPMenuOrientation || (AXPMenuOrientation = {}));
+
+// ThemeStore - Manages theme settings, system changes, and loading states
+const AXPLayoutThemeService = signalStore({ providedIn: 'root' }, 
+// Initial State
+withState(() => {
+    const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // Helper function to get the initial screen size for side menu initialization
+    const getInitialScreenSize = () => {
+        const width = window.innerWidth;
+        if (width <= 600)
+            return AXPScreenSize.Small;
+        if (width <= 1024)
+            return AXPScreenSize.Medium;
+        return AXPScreenSize.Large;
+    };
+    const state = {
+        currentMode: AXPThemeMode.System,
+        currentPalette: 'default',
+        systemThemeMode: (isSystemDark ? AXPThemeMode.Dark : AXPThemeMode.Light),
+        font: {
+            family: 'system-ui',
+            size: 'medium',
+        },
+        overlayLoading: false,
+        navigationLoading: false,
+        overlayLoadingTaskCount: 0,
+        navigationLoadingTaskCount: 0,
+        sideMenuState: (getInitialScreenSize() === AXPScreenSize.Large
+            ? AXPSideMenuState.Opened
+            : AXPSideMenuState.Closed),
+        sideMenuWidth: 288,
+        menuOrientation: 'vertical',
+        _listener: null,
+        isPrinting: false,
+    };
+    return state;
+}), 
+// Computed Signals
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, isPrinting, }) => ({
+    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(() => sideMenuState() === AXPSideMenuState.Opened),
+    isOverlayLoading: computed(() => overlayLoading()),
+    isNavigationLoading: computed(() => navigationLoading()),
+    isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
+})), 
+// Methods for State Management
+withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService)) => {
+    const _applySettings = async () => {
+        // Initialize theme and side menu setting from storage
+        const settingThemeMode = (await settingsService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
+        patchState(store, { currentMode: settingThemeMode });
+        //
+        const settingThemePallete = (await settingsService.get(AXPThemeLayoutSetting.Palette)) ?? 'default';
+        patchState(store, { currentPalette: settingThemePallete });
+        //
+        const settingSideMenu = (await settingsService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
+        patchState(store, { sideMenuState: settingSideMenu });
+        //
+        const settingMenuOrientation = (await settingsService.get(AXPThemeLayoutSetting.MenuOrientation)) ??
+            store.menuOrientation();
+        patchState(store, { menuOrientation: settingMenuOrientation });
+        //
+        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);
+        patchState(store, { sideMenuWidth });
+        await _updateHtmlClass();
+    };
+    // Update HTML class based on theme
+    const _updateHtmlClass = async () => {
+        const html = document.getElementsByTagName('html')[0];
+        //
+        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.currentPalette());
+    };
+    const _setOverlayLoading = async (value, delay = 0) => {
+        if (value) {
+            let timeoutId = null;
+            if (delay > 0) {
+                timeoutId = window.setTimeout(() => {
+                    patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() + 1 });
+                    patchState(store, { overlayLoading: true });
+                }, delay);
+            }
+            else {
+                patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() + 1 });
+                patchState(store, { overlayLoading: true });
+            }
+            // Store timeout ID to clear it if the loading ends before delay
+            store._loadingTimeoutId = timeoutId;
+        }
+        else {
+            if (store.overlayLoadingTaskCount() > 0) {
+                patchState(store, { overlayLoadingTaskCount: store.overlayLoadingTaskCount() - 1 });
+            }
+            if (store.overlayLoadingTaskCount() === 0) {
+                const timeoutId = store._loadingTimeoutId;
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                    store._loadingTimeoutId = null;
+                }
+                timer(minimumDisplayTime).subscribe(() => {
+                    if (store.overlayLoadingTaskCount() === 0) {
+                        patchState(store, { overlayLoading: false });
+                    }
+                });
+            }
+        }
+    };
+    const _setNavigationLoading = (value, delay) => {
+        if (value) {
+            patchState(store, { navigationLoadingTaskCount: store.navigationLoadingTaskCount() + 1 });
+            patchState(store, { navigationLoading: true });
+        }
+        else {
+            if (store.navigationLoadingTaskCount() > 0) {
+                patchState(store, { navigationLoadingTaskCount: store.navigationLoadingTaskCount() - 1 });
+            }
+            if (store.navigationLoadingTaskCount() === 0) {
+                timer(minimumDisplayTime).subscribe(() => {
+                    if (store.navigationLoadingTaskCount() === 0) {
+                        patchState(store, { navigationLoading: false });
+                    }
+                });
+            }
+        }
+    };
+    // Helper method to apply a cached theme palette
+    const _applyThemePalette = async (name) => {
+        // TODO: Get the path from the palette provider token
+        const path = `/assets/themes/palettes/css/${name}.css`;
+        // Check if the current theme is already applied
+        const existingStyle = document.querySelector(`style[data-theme="${name}"]`);
+        if (existingStyle) {
+            return; // Theme is already applied, no need to reapply
+        }
+        _setNavigationLoading(true);
+        try {
+            // Fetch the CSS file via HttpClient
+            const cssText = await firstValueFrom(http.get(path, { responseType: 'text' }));
+            // Create a new <style> tag and apply the CSS
+            const style = document.createElement('style');
+            style.setAttribute('data-theme', name);
+            style.textContent = cssText;
+            document.head.appendChild(style);
+            // Remove any other outdated theme styles
+            document.querySelectorAll('style[data-theme]').forEach((existing) => {
+                if (existing !== style) {
+                    existing.remove();
+                }
+            });
+        }
+        catch (error) {
+            console.error(`Error loading theme CSS:`, error);
+        }
+        finally {
+            _setNavigationLoading(false);
+        }
+    };
+    const minimumDisplayTime = 500; // milliseconds
+    return {
+        // Change theme and update HTML class
+        changeThemeMode(theme) {
+            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.Mode, theme);
+            patchState(store, { currentMode: theme });
+            _updateHtmlClass();
+        },
+        // Open side menu
+        openSideMenu() {
+            patchState(store, { sideMenuState: AXPSideMenuState.Opened });
+            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
+        },
+        // Close side menu
+        closeSideMenu() {
+            patchState(store, { sideMenuState: AXPSideMenuState.Closed });
+            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
+        },
+        // Set side menu width
+        setSideMenuWidth(width) {
+            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);
+        },
+        // Set navigation loading state with a task counter
+        setNavigationLoading(value, delay) {
+            _setNavigationLoading(value, delay);
+        },
+        // Set overlay loading state with a task counter
+        setOverlayLoading(value, delay) {
+            _setOverlayLoading(value, delay);
+        },
+        async loadSettings() {
+            await _applySettings();
+        },
+        // This is for internal use to react to print mode changes
+        _internal_updateHtmlClass: _updateHtmlClass,
+        // Set up event listener for system theme changes
+        _setupSystemColorListener() {
+            const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+            const listener = (e) => {
+                patchState(store, { systemThemeMode: e.matches ? AXPThemeMode.Dark : AXPThemeMode.Light });
+                _updateHtmlClass();
+            };
+            mediaQueryList.addEventListener('change', listener);
+            return listener;
+        },
+        // Remove event listener for system theme changes
+        _removeSystemColorListener(listener) {
+            const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQueryList.removeEventListener('change', listener);
+        },
+    };
+}), 
+// Lifecycle Hooks
+withHooks((store, settingsService = inject(AXPSettingsService)) => ({
+    onInit() {
+        //
+        settingsService.onChanged.pipe(filter((c) => c.scope == AXPPlatformScope.User)).subscribe(async (changes) => {
+            const keys = Object.values(AXPThemeLayoutSetting);
+            if (changes.keys.some((key) => keys.includes(key))) {
+                await store['loadSettings']();
+            }
+        });
+        //
+        settingsService.onLoaded.subscribe(async () => {
+            await store['loadSettings']();
+        });
+        // Set up event listener for system theme changes
+        const listener = store['_setupSystemColorListener']();
+        patchState(store, { _listener: listener });
+        window.addEventListener('beforeprint', () => {
+            patchState(store, { isPrinting: true });
+            store._internal_updateHtmlClass();
+        });
+        window.addEventListener('afterprint', () => {
+            patchState(store, { isPrinting: false });
+            store._internal_updateHtmlClass();
+        });
+    },
+    onDestroy() {
+        // Clean up event listeners when store is destroyed
+        const { _listener: listener } = store;
+        if (listener) {
+            store['_removeSystemColorListener'](listener);
+        }
+    },
+})));
+
+class AXPThemeSlotComponent {
+    constructor() {
+        this.store = inject(AXPLayoutThemeService);
+        this.variants = AXPThemeMode;
+    }
+    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 "
+        [ngClass]="{
+                'fa-desktop':store.isSystemMode(),
+                'fa-moon':!store.isSystemMode() && store.isDarkMode(),
+                'fa-brightness':!store.isSystemMode() && !store.isDarkMode(),
+            }"
+      >
+      </ax-icon>
+      <ax-dropdown-panel *translate="let t">
+        <ax-button-item-list>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.Light)"
+            [text]="('@layout:terms.theme-modes.light' | translate | async)!"
+            [selected]="!store.isSystemMode() && !store.isDarkMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-brightness"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.Dark)"
+            [text]="('@layout:terms.theme-modes.dark' | translate | async)!"
+            [selected]="!store.isSystemMode() && store.isDarkMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-moon"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.System)"
+            [text]="('@layout:terms.theme-modes.system' | translate | async)!"
+            [selected]="store.isSystemMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-desktop"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+        </ax-button-item-list>
+      </ax-dropdown-panel>
+    </ax-button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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: "21.2.9", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-button color="primary">
+      <ax-icon
+        class="fa-regular "
+        [ngClass]="{
+                'fa-desktop':store.isSystemMode(),
+                'fa-moon':!store.isSystemMode() && store.isDarkMode(),
+                'fa-brightness':!store.isSystemMode() && !store.isDarkMode(),
+            }"
+      >
+      </ax-icon>
+      <ax-dropdown-panel *translate="let t">
+        <ax-button-item-list>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.Light)"
+            [text]="('@layout:terms.theme-modes.light' | translate | async)!"
+            [selected]="!store.isSystemMode() && !store.isDarkMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-brightness"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.Dark)"
+            [text]="('@layout:terms.theme-modes.dark' | translate | async)!"
+            [selected]="!store.isSystemMode() && store.isDarkMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-moon"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+          <ax-button-item
+            (onClick)="store.changeThemeMode(variants.System)"
+            [text]="('@layout:terms.theme-modes.system' | translate | async)!"
+            [selected]="store.isSystemMode()"
+          >
+            <ax-prefix>
+              <ax-icon icon="fa-light fa-desktop"> </ax-icon>
+            </ax-prefix>
+          </ax-button-item>
+        </ax-button-item-list>
+      </ax-dropdown-panel>
+    </ax-button>
+  `,
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const AXP_THEME_PALETTE_PROVIDER = new InjectionToken('AXP_THEME_PALETTE_PROVIDER', {
+    providedIn: 'root',
+    factory: async () => {
+        return new AXPThemePaletteProviderDefault();
+    },
+});
+class AXPThemePaletteProviderDefault {
+    getList() {
+        return Promise.resolve([
+            {
+                name: 'default',
+                title: 'Default',
+                path: '/assets/themes/palletes/default.css',
+                colors: {
+                    primary: '#113b53',
+                    secondary: '#1a6ab1',
+                    neutral: '#606c76',
+                    success: '#2d9c67',
+                    warning: '#e9a01b',
+                    danger: '#c02f1d',
+                    accents: ['#d6a7a6', '#a0897e', '#8bf4d9'],
+                    dark: '#2a2d30',
+                    light: '#ffffff',
+                },
+            },
+        ]);
+    }
+}
+
+//#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: "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: "21.2.9", 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;
+    }
+    selectIcon(icon) {
+        this.close({
+            label: icon.label,
+            styleClass: this.selectedIconType,
+            iconClass: `fa-${icon.name}`,
+        });
+    }
+    getIconClass(icon) {
+        return `${this.selectedIconType} fa-${icon.name}`;
+    }
+    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">
+        <!-- Search Bar -->
+        <div class="ax-flex ax-justify-center">
+          <ax-search-box
+            class="ax-w-full"
+            (onValueChanged)="handleSearch($event)"
+            [placeholder]="'@general:widgets.icon-chooser.search-placeholder' | translate | async"
+          ></ax-search-box>
+        </div>
+
+        <!-- Controls Row -->
+        <div class="ax-flex ax-justify-between ax-items-center ax-flex-wrap ax-gap-2">
+          <!-- Icon Style Filter -->
+          <ax-button-group selection="single" look="outline">
+            @for (item of iconTypes; track item.name) {
+              <ax-button-group-item
+                [text]="item.label"
+                [selected]="item.name === selectedIconType"
+                (onClick)="handleIconTypeChange(item)"
+              >
+              </ax-button-group-item>
+            }
+          </ax-button-group>
+
+          <!-- View Mode Toggle -->
+          <ax-button-group selection="single" look="outline">
+            @for (item of viewModes; track item.value) {
+              <ax-button-group-item
+                [title]="item.text | translate | async"
+                [selected]="item.value === selectedViewMode"
+                (onClick)="handleViewModeChange(item)"
+              >
+                <ax-icon [class]="item.icon"></ax-icon>
+              </ax-button-group-item>
+            }
+          </ax-button-group>
+        </div>
+      </div>
+
+      <!-- Scrollable Content Area -->
+      <div class="ax-flex-1 ax-overflow-y-auto ax-p-4 ax-pt-2">
+        <div
+          class="ax-grid ax-gap-1"
+          [ngClass]="
+            selectedViewMode === 'square'
+              ? 'ax-grid-cols-[repeat(auto-fill,minmax(6rem,1fr))]'
+              : 'ax-grid-cols-1 md:ax-grid-cols-2'
+          "
+        >
+          @for (icon of filteredIcons; track icon) {
+            <div
+              class="ax-p-4 ax-border ax-border-transparent ax-rounded-lg ax-flex ax-items-center ax-justify-center ax-gap-2 ax-cursor-pointer ax-transition-all ax-duration-200 ax-ease-in-out hover:ax-border-primary hover:ax-shadow-md"
+              [ngClass]="{
+                'ax-flex-col': selectedViewMode === 'square',
+                'ax-flex-row ax-justify-start': selectedViewMode === 'rectangle',
+              }"
+              (click)="selectIcon(icon)"
+            >
+              <i [class]="getIconClass(icon) + ' ax-text-3xl'"></i>
+              <span
+                class="ax-text-xs ax-w-full ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap"
+                [ngClass]="{
+                  'ax-text-center': selectedViewMode === 'square',
+                  'ax-text-left': selectedViewMode === 'rectangle',
+                }"
+                >{{ icon.label }}</span
+              >
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `, 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: "21.2.9", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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">
+        <!-- Search Bar -->
+        <div class="ax-flex ax-justify-center">
+          <ax-search-box
+            class="ax-w-full"
+            (onValueChanged)="handleSearch($event)"
+            [placeholder]="'@general:widgets.icon-chooser.search-placeholder' | translate | async"
+          ></ax-search-box>
+        </div>
+
+        <!-- Controls Row -->
+        <div class="ax-flex ax-justify-between ax-items-center ax-flex-wrap ax-gap-2">
+          <!-- Icon Style Filter -->
+          <ax-button-group selection="single" look="outline">
+            @for (item of iconTypes; track item.name) {
+              <ax-button-group-item
+                [text]="item.label"
+                [selected]="item.name === selectedIconType"
+                (onClick)="handleIconTypeChange(item)"
+              >
+              </ax-button-group-item>
+            }
+          </ax-button-group>
+
+          <!-- View Mode Toggle -->
+          <ax-button-group selection="single" look="outline">
+            @for (item of viewModes; track item.value) {
+              <ax-button-group-item
+                [title]="item.text | translate | async"
+                [selected]="item.value === selectedViewMode"
+                (onClick)="handleViewModeChange(item)"
+              >
+                <ax-icon [class]="item.icon"></ax-icon>
+              </ax-button-group-item>
+            }
+          </ax-button-group>
+        </div>
+      </div>
+
+      <!-- Scrollable Content Area -->
+      <div class="ax-flex-1 ax-overflow-y-auto ax-p-4 ax-pt-2">
+        <div
+          class="ax-grid ax-gap-1"
+          [ngClass]="
+            selectedViewMode === 'square'
+              ? 'ax-grid-cols-[repeat(auto-fill,minmax(6rem,1fr))]'
+              : 'ax-grid-cols-1 md:ax-grid-cols-2'
+          "
+        >
+          @for (icon of filteredIcons; track icon) {
+            <div
+              class="ax-p-4 ax-border ax-border-transparent ax-rounded-lg ax-flex ax-items-center ax-justify-center ax-gap-2 ax-cursor-pointer ax-transition-all ax-duration-200 ax-ease-in-out hover:ax-border-primary hover:ax-shadow-md"
+              [ngClass]="{
+                'ax-flex-col': selectedViewMode === 'square',
+                'ax-flex-row ax-justify-start': selectedViewMode === 'rectangle',
+              }"
+              (click)="selectIcon(icon)"
+            >
+              <i [class]="getIconClass(icon) + ' ax-text-3xl'"></i>
+              <span
+                class="ax-text-xs ax-w-full ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap"
+                [ngClass]="{
+                  'ax-text-center': selectedViewMode === 'square',
+                  'ax-text-left': selectedViewMode === 'rectangle',
+                }"
+                >{{ icon.label }}</span
+              >
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [AXSearchBoxModule, AXButtonGroupModule, CommonModule, AXDecoratorModule, AXTranslationModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.computedValue = computed(() => {
+            const value = this.getValue();
+            if (typeof value === 'string') {
+                const parts = value.split(' ');
+                if (parts.length === 1) {
+                    return { styleClass: 'fa-solid', iconClass: parts[0] };
+                }
+                else if (parts.length === 2) {
+                    return { styleClass: parts[0], iconClass: parts[1] };
+                }
+                else {
+                    throw new Error(`Invalid icon format: "${value}". Expected format: "icon-class" or "style-class icon-class"`);
+                }
+            }
+            return value;
+        }, ...(ngDevMode ? [{ debugName: "computedValue" }] : /* istanbul ignore next */ []));
+    }
+    async openPopup() {
+        const result = await this.popupService.open(AXPIconChooserPopupComponent, {
+            title: 'Choose Icon',
+            size: 'md',
+            data: {
+                value: this.getValue(),
+            },
+        });
+        if (result?.data) {
+            this.setValue(result.data.styleClass + ' ' + result.data.iconClass);
+        }
+    }
+    addIcon() {
+        if (!this.getValue()) {
+            this.openPopup();
+        }
+    }
+    deleteIcon() {
+        this.setValue(undefined);
+    }
+    editIcon() {
+        this.openPopup();
+    }
+    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()"
+    >
+      <!-- Left: Add or Selected Icon -->
+      <div
+        class="ax-grid ax-place-items-center ax-w-24 ax-h-24 "
+        [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
+        (click)="addIcon()"
+      >
+        <i [class]="getValue() ? computedValue().styleClass + ' ' + computedValue().iconClass : 'fa-solid fa-plus'"></i>
+      </div>
+
+      <!-- Right: Edit & Delete (only if value exists) -->
+      @if (getValue()) {
+        <div class="ax-flex ax-flex-col ax-w-16 ax-text-2xl">
+          <div class="ax-h-12 ax-grid ax-place-items-center ax-cursor-pointer hover:ax-bg-surface" (click)="editIcon()">
+            <i class="fa-light fa-edit ax-text-primary-400"></i>
+          </div>
+          <div
+            class="ax-h-12 ax-grid ax-place-items-center ax-cursor-pointer ax-border-t hover:ax-bg-surface"
+            (click)="deleteIcon()"
+          >
+            <i class="fa-light fa-trash-can ax-text-danger-400"></i>
+          </div>
+        </div>
+      }
+    </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: "21.2.9", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-icon-chooser-edit', 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()"
+    >
+      <!-- Left: Add or Selected Icon -->
+      <div
+        class="ax-grid ax-place-items-center ax-w-24 ax-h-24 "
+        [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
+        (click)="addIcon()"
+      >
+        <i [class]="getValue() ? computedValue().styleClass + ' ' + computedValue().iconClass : 'fa-solid fa-plus'"></i>
+      </div>
+
+      <!-- Right: Edit & Delete (only if value exists) -->
+      @if (getValue()) {
+        <div class="ax-flex ax-flex-col ax-w-16 ax-text-2xl">
+          <div class="ax-h-12 ax-grid ax-place-items-center ax-cursor-pointer hover:ax-bg-surface" (click)="editIcon()">
+            <i class="fa-light fa-edit ax-text-primary-400"></i>
+          </div>
+          <div
+            class="ax-h-12 ax-grid ax-place-items-center ax-cursor-pointer ax-border-t hover:ax-bg-surface"
+            (click)="deleteIcon()"
+          >
+            <i class="fa-light fa-trash-can ax-text-danger-400"></i>
+          </div>
+        </div>
+      }
+    </div>
+   `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }] });
+
+var iconChooserEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPIconChooserWidgetEditComponent: AXPIconChooserWidgetEditComponent
+});
+
+const AXPIconChooserWidget = {
+    name: 'icon-chooser',
+    title: 'Icon Chooser',
+    icon: 'fa-solid fa-icons',
+    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 iconChooserEdit_component; }).then((c) => c.AXPIconChooserWidgetEditComponent),
+        },
+        column: {
+            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-BOTuLdWN.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
+        },
+    },
+};
+
+//#region ----   Default Icon Styles   ----
+const DEFAULT_ICON_STYLES = [
+    { name: 'fa-regular', label: 'Regular' },
+    { name: 'fa-solid', label: 'Solid' },
+];
+//#endregion
+//#region ----   Default Icons   ----
+const DEFAULT_ICONS = [
+    // Navigation & Actions
+    { name: 'house', label: 'House', tags: ['home', 'building', 'house'] },
+    { name: 'magnifying-glass', label: 'Search', tags: ['find', 'zoom'] },
+    { name: 'user', label: 'User', tags: ['person', 'account'] },
+    { name: 'users', label: 'Users', tags: ['people', 'group', 'team'] },
+    { name: 'user-group', label: 'User Group', tags: ['team', 'group', 'people'] },
+    { name: 'check', label: 'Check', tags: ['confirm', 'done', 'tick'] },
+    { name: 'check-circle', label: 'Check Circle', tags: ['confirm', 'success', 'done'] },
+    { name: 'check-double', label: 'Check Double', tags: ['verified', 'confirmed'] },
+    { name: 'xmark', label: 'Close', tags: ['cancel', 'exit', 'remove'] },
+    { name: 'circle-xmark', label: 'Circle Close', tags: ['cancel', 'error', 'remove'] },
+    { name: 'plus', label: 'Add', tags: ['create', 'new', 'plus'] },
+    { name: 'circle-plus', label: 'Circle Plus', tags: ['add', 'create', 'new'] },
+    { name: 'minus', label: 'Remove', tags: ['delete', 'subtract', 'minus'] },
+    { name: 'circle-minus', label: 'Circle Minus', tags: ['remove', 'subtract'] },
+    { name: 'edit', label: 'Edit', tags: ['modify', 'change', 'pencil'] },
+    { name: 'pen-to-square', label: 'Edit Square', tags: ['edit', 'modify', 'write'] },
+    { name: 'trash', label: 'Delete', tags: ['remove', 'delete', 'bin'] },
+    { name: 'trash-can', label: 'Trash Can', tags: ['delete', 'remove', 'garbage'] },
+    { name: 'copy', label: 'Copy', tags: ['duplicate', 'clone'] },
+    { name: 'clone', label: 'Clone', tags: ['duplicate', 'copy'] },
+    { name: 'download', label: 'Download', tags: ['save', 'export'] },
+    { name: 'upload', label: 'Upload', tags: ['import', 'send'] },
+    { name: 'print', label: 'Print', tags: ['printer', 'document'] },
+    { name: 'share', label: 'Share', tags: ['send', 'distribute'] },
+    { name: 'share-nodes', label: 'Share Network', tags: ['share', 'distribute', 'network'] },
+    { name: 'link', label: 'Link', tags: ['url', 'connection'] },
+    { name: 'link-slash', label: 'Unlink', tags: ['disconnect', 'remove'] },
+    { name: 'external-link', label: 'External Link', tags: ['open', 'external'] },
+    { name: 'arrows-rotate', label: 'Refresh', tags: ['reload', 'sync', 'update'] },
+    { name: 'rotate-right', label: 'Rotate Right', tags: ['refresh', 'reload'] },
+    { name: 'arrows-left-right', label: 'Arrows Horizontal', tags: ['swap', 'exchange'] },
+    { name: 'arrow-up', label: 'Arrow Up', tags: ['up', 'direction'] },
+    { name: 'arrow-down', label: 'Arrow Down', tags: ['down', 'direction'] },
+    { name: 'arrow-left', label: 'Arrow Left', tags: ['left', 'back', 'previous'] },
+    { name: 'arrow-right', label: 'Arrow Right', tags: ['right', 'forward', 'next'] },
+    { name: 'chevron-up', label: 'Chevron Up', tags: ['up', 'collapse'] },
+    { name: 'chevron-down', label: 'Chevron Down', tags: ['down', 'expand'] },
+    { name: 'chevron-left', label: 'Chevron Left', tags: ['left', 'previous'] },
+    { name: 'chevron-right', label: 'Chevron Right', tags: ['right', 'next'] },
+    { name: 'angle-up', label: 'Angle Up', tags: ['up', 'caret'] },
+    { name: 'angle-down', label: 'Angle Down', tags: ['down', 'caret'] },
+    { name: 'angle-left', label: 'Angle Left', tags: ['left', 'caret'] },
+    { name: 'angle-right', label: 'Angle Right', tags: ['right', 'caret'] },
+    { name: 'bars', label: 'Menu', tags: ['hamburger', 'menu', 'navigation'] },
+    { name: 'ellipsis', label: 'Ellipsis', tags: ['more', 'options', 'menu'] },
+    { name: 'ellipsis-vertical', label: 'Ellipsis Vertical', tags: ['more', 'options', 'menu'] },
+    { name: 'grip', label: 'Grip', tags: ['drag', 'handle', 'move'] },
+    { name: 'grip-vertical', label: 'Grip Vertical', tags: ['drag', 'handle', 'move'] },
+    { name: 'filter', label: 'Filter', tags: ['sort', 'search', 'refine'] },
+    { name: 'sliders', label: 'Settings', tags: ['adjust', 'options', 'preferences'] },
+    // Media & Files
+    { name: 'star', label: 'Star', tags: ['favorite', 'rate'] },
+    { name: 'star-half', label: 'Star Half', tags: ['rating', 'half'] },
+    { name: 'heart', label: 'Heart', tags: ['love', 'like', 'favorite'] },
+    { name: 'heart-pulse', label: 'Heart Pulse', tags: ['health', 'medical', 'heartbeat'] },
+    { name: 'cloud', label: 'Cloud', tags: ['weather', 'sky', 'storage'] },
+    { name: 'cloud-arrow-up', label: 'Cloud Upload', tags: ['upload', 'backup', 'save'] },
+    { name: 'cloud-arrow-down', label: 'Cloud Download', tags: ['download', 'restore'] },
+    { name: 'envelope', label: 'Envelope', tags: ['mail', 'message', 'email'] },
+    { name: 'envelope-open', label: 'Envelope Open', tags: ['mail', 'read', 'message'] },
+    { name: 'paper-plane', label: 'Send', tags: ['send', 'message', 'email'] },
+    { name: 'folder', label: 'Folder', tags: ['directory', 'files'] },
+    { name: 'folder-open', label: 'Folder Open', tags: ['directory', 'files', 'open'] },
+    { name: 'folder-plus', label: 'New Folder', tags: ['create', 'directory', 'add'] },
+    { name: 'folder-tree', label: 'Folder Tree', tags: ['structure', 'hierarchy', 'files'] },
+    { name: 'gear', label: 'Gear', tags: ['settings', 'options', 'config'] },
+    { name: 'gears', label: 'Gears', tags: ['settings', 'configuration', 'system'] },
+    { name: 'camera', label: 'Camera', tags: ['photo', 'image', 'picture'] },
+    { name: 'camera-retro', label: 'Camera Retro', tags: ['photo', 'vintage'] },
+    { name: 'video', label: 'Video', tags: ['film', 'movie', 'camera'] },
+    { name: 'video-slash', label: 'Video Off', tags: ['disabled', 'mute', 'off'] },
+    { name: 'music', label: 'Music', tags: ['sound', 'audio', 'song'] },
+    { name: 'file', label: 'File', tags: ['document', 'file'] },
+    { name: 'file-lines', label: 'File Text', tags: ['document', 'text'] },
+    { name: 'file-pdf', label: 'PDF', tags: ['document', 'pdf'] },
+    { name: 'file-word', label: 'Word Document', tags: ['document', 'word', 'doc'] },
+    { name: 'file-excel', label: 'Excel', tags: ['spreadsheet', 'excel', 'xls'] },
+    { name: 'file-powerpoint', label: 'PowerPoint', tags: ['presentation', 'powerpoint', 'ppt'] },
+    { name: 'file-image', label: 'Image File', tags: ['picture', 'photo', 'image'] },
+    { name: 'file-video', label: 'Video File', tags: ['movie', 'clip', 'video'] },
+    { name: 'file-audio', label: 'Audio File', tags: ['sound', 'music', 'audio'] },
+    { name: 'file-code', label: 'Code File', tags: ['code', 'programming', 'source'] },
+    { name: 'file-zipper', label: 'Archive', tags: ['zip', 'compressed', 'archive'] },
+    { name: 'file-csv', label: 'CSV File', tags: ['spreadsheet', 'data', 'csv'] },
+    { name: 'image', label: 'Image', tags: ['picture', 'photo'] },
+    { name: 'images', label: 'Images', tags: ['gallery', 'photos', 'pictures'] },
+    { name: 'photo-film', label: 'Photo Film', tags: ['gallery', 'images', 'media'] },
+    { name: 'microphone', label: 'Microphone', tags: ['audio', 'voice', 'record'] },
+    { name: 'microphone-slash', label: 'Microphone Off', tags: ['mute', 'audio', 'off'] },
+    { name: 'volume-high', label: 'Volume High', tags: ['sound', 'audio', 'loud'] },
+    { name: 'volume-low', label: 'Volume Low', tags: ['sound', 'audio', 'quiet'] },
+    { name: 'volume-xmark', label: 'Mute', tags: ['mute', 'silent', 'off'] },
+    // Communication & Social
+    { name: 'phone', label: 'Phone', tags: ['call', 'telephone', 'contact'] },
+    { name: 'phone-flip', label: 'Phone Flip', tags: ['call', 'mobile', 'flip'] },
+    { name: 'mobile', label: 'Mobile', tags: ['cell', 'smartphone', 'phone'] },
+    { name: 'mobile-screen', label: 'Mobile Screen', tags: ['smartphone', 'device'] },
+    { name: 'fax', label: 'Fax', tags: ['document', 'send', 'print'] },
+    { name: 'comment', label: 'Comment', tags: ['message', 'chat', 'text'] },
+    { name: 'comments', label: 'Comments', tags: ['messages', 'discussion', 'chat'] },
+    { name: 'comment-dots', label: 'Comment Typing', tags: ['message', 'typing', 'chat'] },
+    { name: 'message', label: 'Message', tags: ['chat', 'text', 'communication'] },
+    { name: 'inbox', label: 'Inbox', tags: ['mail', 'messages', 'receive'] },
+    { name: 'at', label: 'At Symbol', tags: ['email', 'mention', 'tag'] },
+    { name: 'hashtag', label: 'Hashtag', tags: ['tag', 'social', 'topic'] },
+    { name: 'thumbs-up', label: 'Like', tags: ['approve', 'good', 'positive'] },
+    { name: 'thumbs-down', label: 'Dislike', tags: ['disapprove', 'bad', 'negative'] },
+    { name: 'bell', label: 'Notification', tags: ['alert', 'reminder', 'notification'] },
+    { name: 'bell-slash', label: 'Notifications Off', tags: ['mute', 'silent', 'off'] },
+    { name: 'flag', label: 'Flag', tags: ['mark', 'report', 'bookmark'] },
+    { name: 'flag-checkered', label: 'Flag Checkered', tags: ['finish', 'end', 'goal'] },
+    { name: 'bookmark', label: 'Bookmark', tags: ['save', 'favorite', 'mark'] },
+    { name: 'calendar', label: 'Calendar', tags: ['date', 'schedule', 'event'] },
+    { name: 'calendar-days', label: 'Calendar Days', tags: ['date', 'month', 'schedule'] },
+    { name: 'calendar-check', label: 'Calendar Check', tags: ['event', 'confirmed', 'scheduled'] },
+    { name: 'calendar-plus', label: 'Calendar Add', tags: ['event', 'create', 'schedule'] },
+    { name: 'clock', label: 'Clock', tags: ['time', 'schedule', 'hour'] },
+    { name: 'hourglass', label: 'Hourglass', tags: ['time', 'waiting', 'timer'] },
+    { name: 'stopwatch', label: 'Stopwatch', tags: ['timer', 'time', 'track'] },
+    { name: 'rss', label: 'RSS', tags: ['feed', 'news', 'subscribe'] },
+    // Business & Finance
+    { name: 'chart-line', label: 'Chart Line', tags: ['graph', 'analytics', 'trending'] },
+    { name: 'chart-bar', label: 'Bar Chart', tags: ['graph', 'statistics', 'data'] },
+    { name: 'chart-pie', label: 'Pie Chart', tags: ['graph', 'percentage', 'data'] },
+    { name: 'chart-area', label: 'Area Chart', tags: ['graph', 'analytics', 'data'] },
+    { name: 'chart-column', label: 'Column Chart', tags: ['graph', 'statistics'] },
+    { name: 'chart-simple', label: 'Simple Chart', tags: ['graph', 'data', 'analytics'] },
+    { name: 'calculator', label: 'Calculator', tags: ['math', 'compute', 'calculate'] },
+    { name: 'percent', label: 'Percent', tags: ['percentage', 'discount', 'rate'] },
+    { name: 'dollar-sign', label: 'Dollar', tags: ['money', 'currency', 'usd'] },
+    { name: 'euro-sign', label: 'Euro', tags: ['money', 'currency', 'eur'] },
+    { name: 'sterling-sign', label: 'Pound', tags: ['money', 'currency', 'gbp'] },
+    { name: 'yen-sign', label: 'Yen', tags: ['money', 'currency', 'jpy'] },
+    { name: 'coins', label: 'Coins', tags: ['money', 'cash', 'currency'] },
+    { name: 'money-bill', label: 'Money Bill', tags: ['cash', 'currency', 'payment'] },
+    { name: 'wallet', label: 'Wallet', tags: ['money', 'payment', 'cash'] },
+    { name: 'credit-card', label: 'Credit Card', tags: ['payment', 'card', 'bank'] },
+    { name: 'money-check', label: 'Check', tags: ['payment', 'bank', 'check'] },
+    { name: 'receipt', label: 'Receipt', tags: ['bill', 'invoice', 'payment'] },
+    { name: 'file-invoice', label: 'Invoice', tags: ['bill', 'receipt', 'document'] },
+    { name: 'file-invoice-dollar', label: 'Invoice Dollar', tags: ['bill', 'payment', 'money'] },
+    { name: 'briefcase', label: 'Briefcase', tags: ['business', 'work', 'professional'] },
+    { name: 'suitcase', label: 'Suitcase', tags: ['travel', 'business', 'luggage'] },
+    { name: 'building', label: 'Building', tags: ['office', 'company', 'business'] },
+    { name: 'building-columns', label: 'Bank', tags: ['bank', 'government', 'institution'] },
+    { name: 'store', label: 'Store', tags: ['shop', 'retail', 'business'] },
+    { name: 'handshake', label: 'Handshake', tags: ['agreement', 'partnership', 'deal'] },
+    { name: 'scale-balanced', label: 'Balance', tags: ['law', 'justice', 'legal'] },
+    { name: 'gavel', label: 'Gavel', tags: ['law', 'court', 'legal'] },
+    // Technology & Tools
+    { name: 'laptop', label: 'Laptop', tags: ['computer', 'notebook', 'device'] },
+    { name: 'laptop-code', label: 'Laptop Code', tags: ['programming', 'development'] },
+    { name: 'desktop', label: 'Desktop', tags: ['computer', 'monitor', 'screen'] },
+    { name: 'tablet', label: 'Tablet', tags: ['ipad', 'device', 'mobile'] },
+    { name: 'tablet-screen-button', label: 'Tablet Button', tags: ['device', 'touch'] },
+    { name: 'keyboard', label: 'Keyboard', tags: ['input', 'typing', 'keys'] },
+    { name: 'mouse', label: 'Mouse', tags: ['pointer', 'click', 'input'] },
+    { name: 'display', label: 'Display', tags: ['monitor', 'screen', 'computer'] },
+    { name: 'wifi', label: 'WiFi', tags: ['internet', 'connection', 'wireless'] },
+    { name: 'ethernet', label: 'Ethernet', tags: ['network', 'connection', 'cable'] },
+    { name: 'signal', label: 'Signal', tags: ['network', 'connection', 'wifi'] },
+    { name: 'network-wired', label: 'Network', tags: ['connection', 'lan', 'ethernet'] },
+    { name: 'database', label: 'Database', tags: ['data', 'storage', 'sql'] },
+    { name: 'hard-drive', label: 'Hard Drive', tags: ['storage', 'disk', 'hdd'] },
+    { name: 'server', label: 'Server', tags: ['hosting', 'backend', 'computer'] },
+    { name: 'memory', label: 'Memory', tags: ['ram', 'chip', 'hardware'] },
+    { name: 'microchip', label: 'Microchip', tags: ['chip', 'processor', 'cpu'] },
+    { name: 'code', label: 'Code', tags: ['programming', 'development', 'coding'] },
+    { name: 'code-branch', label: 'Git Branch', tags: ['version', 'git', 'branch'] },
+    { name: 'code-commit', label: 'Commit', tags: ['git', 'version', 'save'] },
+    { name: 'code-merge', label: 'Merge', tags: ['git', 'branch', 'combine'] },
+    { name: 'code-pull-request', label: 'Pull Request', tags: ['git', 'pr', 'review'] },
+    { name: 'terminal', label: 'Terminal', tags: ['console', 'command', 'cli'] },
+    { name: 'window-maximize', label: 'Maximize', tags: ['window', 'expand', 'fullscreen'] },
+    { name: 'window-minimize', label: 'Minimize', tags: ['window', 'collapse'] },
+    { name: 'window-restore', label: 'Restore', tags: ['window', 'resize'] },
+    { name: 'bug', label: 'Bug', tags: ['error', 'debug', 'issue'] },
+    { name: 'wrench', label: 'Wrench', tags: ['tools', 'settings', 'fix'] },
+    { name: 'screwdriver-wrench', label: 'Tools', tags: ['repair', 'fix', 'settings'] },
+    { name: 'hammer', label: 'Hammer', tags: ['tool', 'build', 'construct'] },
+    { name: 'shield', label: 'Shield', tags: ['security', 'protection', 'defense'] },
+    { name: 'shield-halved', label: 'Shield Half', tags: ['security', 'protection'] },
+    { name: 'lock', label: 'Lock', tags: ['security', 'private', 'secure'] },
+    { name: 'lock-open', label: 'Lock Open', tags: ['unlocked', 'open'] },
+    { name: 'unlock', label: 'Unlock', tags: ['open', 'access', 'unlock'] },
+    { name: 'key', label: 'Key', tags: ['access', 'password', 'security'] },
+    { name: 'user-lock', label: 'User Lock', tags: ['security', 'private', 'protected'] },
+    { name: 'user-shield', label: 'User Shield', tags: ['security', 'protected', 'admin'] },
+    { name: 'qrcode', label: 'QR Code', tags: ['code', 'scan', 'barcode'] },
+    { name: 'barcode', label: 'Barcode', tags: ['scan', 'code', 'product'] },
+    // Transportation & Location
+    { name: 'car', label: 'Car', tags: ['vehicle', 'automobile', 'transport'] },
+    { name: 'car-side', label: 'Car Side', tags: ['vehicle', 'automobile'] },
+    { name: 'taxi', label: 'Taxi', tags: ['cab', 'transport', 'vehicle'] },
+    { name: 'bus', label: 'Bus', tags: ['transport', 'public', 'vehicle'] },
+    { name: 'van-shuttle', label: 'Van', tags: ['transport', 'vehicle'] },
+    { name: 'truck', label: 'Truck', tags: ['vehicle', 'delivery', 'transport'] },
+    { name: 'truck-fast', label: 'Fast Delivery', tags: ['shipping', 'express', 'delivery'] },
+    { name: 'motorcycle', label: 'Motorcycle', tags: ['bike', 'vehicle', 'transport'] },
+    { name: 'plane', label: 'Plane', tags: ['aircraft', 'travel', 'flight'] },
+    { name: 'plane-departure', label: 'Departure', tags: ['flight', 'travel', 'takeoff'] },
+    { name: 'plane-arrival', label: 'Arrival', tags: ['flight', 'travel', 'landing'] },
+    { name: 'helicopter', label: 'Helicopter', tags: ['aircraft', 'flight'] },
+    { name: 'rocket', label: 'Rocket', tags: ['space', 'launch', 'fast'] },
+    { name: 'train', label: 'Train', tags: ['railway', 'transport', 'travel'] },
+    { name: 'subway', label: 'Subway', tags: ['metro', 'underground', 'transport'] },
+    { name: 'ship', label: 'Ship', tags: ['boat', 'vessel', 'water'] },
+    { name: 'anchor', label: 'Anchor', tags: ['ship', 'marine', 'boat'] },
+    { name: 'bicycle', label: 'Bicycle', tags: ['bike', 'cycle', 'transport'] },
+    { name: 'road', label: 'Road', tags: ['street', 'path', 'route'] },
+    { name: 'map', label: 'Map', tags: ['location', 'navigation', 'directions'] },
+    { name: 'map-location', label: 'Map Location', tags: ['pin', 'marker', 'place'] },
+    { name: 'map-pin', label: 'Location Pin', tags: ['pin', 'marker', 'place'] },
+    { name: 'location-dot', label: 'Location', tags: ['pin', 'marker', 'gps'] },
+    { name: 'location-crosshairs', label: 'GPS', tags: ['location', 'position', 'gps'] },
+    { name: 'route', label: 'Route', tags: ['directions', 'path', 'navigation'] },
+    { name: 'globe', label: 'Globe', tags: ['world', 'earth', 'global'] },
+    { name: 'earth-americas', label: 'Americas', tags: ['world', 'global', 'earth'] },
+    { name: 'earth-europe', label: 'Europe', tags: ['world', 'global', 'earth'] },
+    { name: 'earth-asia', label: 'Asia', tags: ['world', 'global', 'earth'] },
+    { name: 'compass', label: 'Compass', tags: ['direction', 'navigation', 'north'] },
+    { name: 'street-view', label: 'Street View', tags: ['location', 'map', 'view'] },
+    // Health & Medical
+    { name: 'heart-pulse', label: 'Heart Rate', tags: ['health', 'medical', 'heartbeat'] },
+    { name: 'heart-circle-plus', label: 'Heart Plus', tags: ['health', 'add', 'medical'] },
+    { name: 'stethoscope', label: 'Stethoscope', tags: ['medical', 'doctor', 'health'] },
+    { name: 'user-doctor', label: 'Doctor', tags: ['medical', 'physician', 'healthcare'] },
+    { name: 'user-nurse', label: 'Nurse', tags: ['medical', 'healthcare', 'hospital'] },
+    { name: 'pills', label: 'Pills', tags: ['medicine', 'drugs', 'medication'] },
+    { name: 'capsules', label: 'Capsules', tags: ['medicine', 'pills', 'medication'] },
+    { name: 'prescription-bottle', label: 'Prescription', tags: ['medicine', 'pharmacy'] },
+    { name: 'syringe', label: 'Syringe', tags: ['injection', 'medical', 'vaccine'] },
+    { name: 'vial', label: 'Vial', tags: ['medicine', 'vaccine', 'medical'] },
+    { name: 'bandage', label: 'Bandage', tags: ['first aid', 'wound', 'medical'] },
+    { name: 'thermometer', label: 'Thermometer', tags: ['temperature', 'health', 'medical'] },
+    { name: 'hospital', label: 'Hospital', tags: ['medical', 'healthcare', 'building'] },
+    { name: 'hospital-user', label: 'Patient', tags: ['medical', 'healthcare', 'patient'] },
+    { name: 'bed-pulse', label: 'Hospital Bed', tags: ['medical', 'patient', 'hospital'] },
+    { name: 'wheelchair', label: 'Wheelchair', tags: ['accessibility', 'medical', 'disabled'] },
+    { name: 'crutch', label: 'Crutch', tags: ['medical', 'injury', 'support'] },
+    { name: 'smoking', label: 'Smoking', tags: ['cigarette', 'health', 'no-smoking'] },
+    { name: 'smoking-ban', label: 'No Smoking', tags: ['prohibited', 'health'] },
+    // Education & Learning
+    { name: 'graduation-cap', label: 'Graduation', tags: ['education', 'degree', 'graduate'] },
+    { name: 'user-graduate', label: 'Graduate', tags: ['student', 'education', 'degree'] },
+    { name: 'chalkboard-user', label: 'Teacher', tags: ['education', 'teaching', 'classroom'] },
+    { name: 'school', label: 'School', tags: ['education', 'building', 'learning'] },
+    { name: 'book', label: 'Book', tags: ['reading', 'education', 'library'] },
+    { name: 'book-open', label: 'Open Book', tags: ['reading', 'study', 'learn'] },
+    { name: 'book-bookmark', label: 'Bookmark', tags: ['reading', 'save', 'mark'] },
+    { name: 'books', label: 'Books', tags: ['reading', 'library', 'education'] },
+    { name: 'bookmark', label: 'Bookmark', tags: ['save', 'mark', 'reading'] },
+    { name: 'pen', label: 'Pen', tags: ['write', 'draw', 'writing'] },
+    { name: 'pen-fancy', label: 'Fancy Pen', tags: ['write', 'signature'] },
+    { name: 'pen-nib', label: 'Pen Nib', tags: ['write', 'calligraphy'] },
+    { name: 'pencil', label: 'Pencil', tags: ['write', 'draw', 'edit'] },
+    { name: 'highlighter', label: 'Highlighter', tags: ['mark', 'emphasize', 'note'] },
+    { name: 'marker', label: 'Marker', tags: ['write', 'draw', 'mark'] },
+    { name: 'eraser', label: 'Eraser', tags: ['delete', 'remove', 'erase'] },
+    { name: 'ruler', label: 'Ruler', tags: ['measure', 'straight', 'tool'] },
+    { name: 'ruler-combined', label: 'Rulers', tags: ['measure', 'geometry'] },
+    { name: 'calculator', label: 'Calculator', tags: ['math', 'calculate', 'compute'] },
+    { name: 'square-root-variable', label: 'Math', tags: ['mathematics', 'equation'] },
+    { name: 'microscope', label: 'Microscope', tags: ['science', 'research', 'lab'] },
+    { name: 'flask', label: 'Flask', tags: ['science', 'chemistry', 'lab'] },
+    { name: 'atom', label: 'Atom', tags: ['science', 'physics', 'chemistry'] },
+    { name: 'dna', label: 'DNA', tags: ['science', 'biology', 'genetics'] },
+    { name: 'brain', label: 'Brain', tags: ['mind', 'think', 'intelligence'] },
+    { name: 'certificate', label: 'Certificate', tags: ['award', 'achievement', 'diploma'] },
+    { name: 'award', label: 'Award', tags: ['trophy', 'achievement', 'prize'] },
+    { name: 'medal', label: 'Medal', tags: ['award', 'achievement', 'winner'] },
+    { name: 'trophy', label: 'Trophy', tags: ['award', 'winner', 'achievement'] },
+    // Food & Dining
+    { name: 'utensils', label: 'Utensils', tags: ['food', 'dining', 'restaurant'] },
+    { name: 'fork-knife', label: 'Fork Knife', tags: ['food', 'dining', 'restaurant'] },
+    { name: 'plate-utensils', label: 'Plate', tags: ['food', 'dining', 'meal'] },
+    { name: 'pizza-slice', label: 'Pizza', tags: ['food', 'slice', 'italian'] },
+    { name: 'burger', label: 'Burger', tags: ['food', 'fast', 'hamburger'] },
+    { name: 'hotdog', label: 'Hotdog', tags: ['food', 'fast'] },
+    { name: 'drumstick-bite', label: 'Chicken', tags: ['food', 'meat', 'poultry'] },
+    { name: 'ice-cream', label: 'Ice Cream', tags: ['dessert', 'sweet', 'frozen'] },
+    { name: 'mug-hot', label: 'Hot Beverage', tags: ['drink', 'coffee', 'tea'] },
+    { name: 'coffee', label: 'Coffee', tags: ['drink', 'beverage', 'cafe'] },
+    { name: 'mug-saucer', label: 'Coffee Cup', tags: ['drink', 'coffee', 'tea'] },
+    { name: 'glass-water', label: 'Water', tags: ['drink', 'beverage', 'glass'] },
+    { name: 'wine-glass', label: 'Wine', tags: ['drink', 'alcohol', 'beverage'] },
+    { name: 'champagne-glasses', label: 'Champagne', tags: ['celebrate', 'drink', 'toast'] },
+    { name: 'martini-glass', label: 'Martini', tags: ['drink', 'alcohol', 'cocktail'] },
+    { name: 'beer-mug-empty', label: 'Beer', tags: ['drink', 'alcohol', 'beverage'] },
+    { name: 'cake', label: 'Cake', tags: ['dessert', 'sweet', 'birthday'] },
+    { name: 'cake-candles', label: 'Birthday Cake', tags: ['birthday', 'celebration', 'party'] },
+    { name: 'cookie', label: 'Cookie', tags: ['food', 'dessert', 'sweet'] },
+    { name: 'candy-cane', label: 'Candy Cane', tags: ['candy', 'sweet', 'christmas'] },
+    { name: 'apple-whole', label: 'Apple', tags: ['fruit', 'healthy', 'food'] },
+    { name: 'lemon', label: 'Lemon', tags: ['fruit', 'citrus', 'food'] },
+    { name: 'carrot', label: 'Carrot', tags: ['vegetable', 'healthy', 'food'] },
+    { name: 'pepper-hot', label: 'Pepper', tags: ['spicy', 'food', 'hot'] },
+    // Sports & Recreation
+    { name: 'football', label: 'Football', tags: ['sport', 'soccer', 'game'] },
+    { name: 'futbol', label: 'Soccer Ball', tags: ['sport', 'football', 'ball'] },
+    { name: 'basketball', label: 'Basketball', tags: ['sport', 'ball', 'game'] },
+    { name: 'baseball', label: 'Baseball', tags: ['sport', 'ball', 'game'] },
+    { name: 'baseball-bat-ball', label: 'Baseball Bat', tags: ['sport', 'baseball'] },
+    { name: 'volleyball', label: 'Volleyball', tags: ['sport', 'ball', 'game'] },
+    { name: 'table-tennis-paddle-ball', label: 'Table Tennis', tags: ['sport', 'ping-pong'] },
+    { name: 'golf-ball-tee', label: 'Golf', tags: ['sport', 'golf', 'game'] },
+    { name: 'hockey-puck', label: 'Hockey', tags: ['sport', 'ice', 'game'] },
+    { name: 'bowling-ball', label: 'Bowling', tags: ['sport', 'game', 'ball'] },
+    { name: 'person-running', label: 'Running', tags: ['sport', 'exercise', 'fitness'] },
+    { name: 'person-biking', label: 'Biking', tags: ['sport', 'exercise', 'cycling'] },
+    { name: 'person-swimming', label: 'Swimming', tags: ['sport', 'water', 'exercise'] },
+    { name: 'person-skiing', label: 'Skiing', tags: ['sport', 'winter', 'snow'] },
+    { name: 'dumbbell', label: 'Dumbbell', tags: ['fitness', 'weight', 'gym'] },
+    { name: 'weight-hanging', label: 'Weight', tags: ['fitness', 'gym', 'exercise'] },
+    { name: 'heart', label: 'Heart', tags: ['health', 'fitness', 'cardio'] },
+    { name: 'stopwatch-20', label: 'Timer', tags: ['time', 'sport', 'track'] },
+    // Weather & Nature
+    { name: 'sun', label: 'Sun', tags: ['weather', 'bright', 'sunny'] },
+    { name: 'moon', label: 'Moon', tags: ['night', 'dark', 'lunar'] },
+    { name: 'star', label: 'Star', tags: ['night', 'sky', 'favorite'] },
+    { name: 'cloud', label: 'Cloud', tags: ['weather', 'sky', 'cloudy'] },
+    { name: 'cloud-sun', label: 'Partly Cloudy', tags: ['weather', 'mixed'] },
+    { name: 'cloud-moon', label: 'Cloudy Night', tags: ['weather', 'night'] },
+    { name: 'cloud-rain', label: 'Rain', tags: ['weather', 'precipitation', 'rainy'] },
+    { name: 'cloud-showers-heavy', label: 'Heavy Rain', tags: ['weather', 'storm', 'rain'] },
+    { name: 'umbrella', label: 'Umbrella', tags: ['rain', 'weather', 'protection'] },
+    { name: 'snowflake', label: 'Snow', tags: ['weather', 'cold', 'winter'] },
+    { name: 'icicles', label: 'Icicles', tags: ['winter', 'cold', 'ice'] },
+    { name: 'temperature-high', label: 'Hot', tags: ['weather', 'temperature', 'heat'] },
+    { name: 'temperature-low', label: 'Cold', tags: ['weather', 'temperature', 'cool'] },
+    { name: 'bolt', label: 'Lightning', tags: ['weather', 'storm', 'thunder'] },
+    { name: 'bolt-lightning', label: 'Thunder', tags: ['weather', 'storm', 'lightning'] },
+    { name: 'wind', label: 'Wind', tags: ['weather', 'breeze', 'air'] },
+    { name: 'tornado', label: 'Tornado', tags: ['weather', 'storm', 'cyclone'] },
+    { name: 'water', label: 'Water', tags: ['nature', 'liquid', 'sea'] },
+    { name: 'droplet', label: 'Droplet', tags: ['water', 'liquid', 'drop'] },
+    { name: 'fire', label: 'Fire', tags: ['hot', 'burn', 'flame'] },
+    { name: 'fire-flame-curved', label: 'Flame', tags: ['fire', 'hot', 'burn'] },
+    { name: 'tree', label: 'Tree', tags: ['nature', 'plant', 'forest'] },
+    { name: 'seedling', label: 'Seedling', tags: ['plant', 'grow', 'nature'] },
+    { name: 'leaf', label: 'Leaf', tags: ['nature', 'plant', 'green'] },
+    { name: 'clover', label: 'Clover', tags: ['nature', 'plant', 'lucky'] },
+    { name: 'flower', label: 'Flower', tags: ['nature', 'plant', 'blossom'] },
+    { name: 'feather', label: 'Feather', tags: ['nature', 'bird', 'light'] },
+    { name: 'mountain', label: 'Mountain', tags: ['nature', 'landscape', 'peak'] },
+    // Shopping & Commerce
+    { name: 'shopping-cart', label: 'Shopping Cart', tags: ['buy', 'purchase', 'shop'] },
+    { name: 'cart-plus', label: 'Add to Cart', tags: ['shopping', 'add', 'buy'] },
+    { name: 'cart-shopping', label: 'Cart', tags: ['shop', 'buy', 'store'] },
+    { name: 'bag-shopping', label: 'Shopping Bag', tags: ['buy', 'store', 'retail'] },
+    { name: 'basket-shopping', label: 'Basket', tags: ['shopping', 'buy', 'cart'] },
+    { name: 'store', label: 'Store', tags: ['shop', 'retail', 'business'] },
+    { name: 'shop', label: 'Shop', tags: ['store', 'retail', 'business'] },
+    { name: 'cash-register', label: 'Cash Register', tags: ['payment', 'checkout', 'pos'] },
+    { name: 'tags', label: 'Tags', tags: ['price', 'label', 'sale'] },
+    { name: 'tag', label: 'Tag', tags: ['price', 'label', 'sale'] },
+    { name: 'barcode', label: 'Barcode', tags: ['scan', 'product', 'price'] },
+    { name: 'percent', label: 'Percent', tags: ['discount', 'sale', 'offer'] },
+    { name: 'gift', label: 'Gift', tags: ['present', 'surprise', 'celebration'] },
+    { name: 'gifts', label: 'Gifts', tags: ['presents', 'celebration'] },
+    { name: 'box', label: 'Box', tags: ['package', 'container', 'shipping'] },
+    { name: 'box-open', label: 'Open Box', tags: ['unpack', 'delivery', 'package'] },
+    { name: 'boxes-stacked', label: 'Boxes', tags: ['inventory', 'storage', 'warehouse'] },
+    // Security & Safety
+    { name: 'eye', label: 'Eye', tags: ['view', 'watch', 'visible'] },
+    { name: 'eye-slash', label: 'Hide', tags: ['hidden', 'invisible', 'password'] },
+    { name: 'eye-low-vision', label: 'Low Vision', tags: ['accessibility', 'vision'] },
+    { name: 'user-secret', label: 'Secret User', tags: ['anonymous', 'hidden', 'spy'] },
+    { name: 'fingerprint', label: 'Fingerprint', tags: ['biometric', 'identity', 'security'] },
+    { name: 'id-card', label: 'ID Card', tags: ['identity', 'badge', 'credential'] },
+    { name: 'id-badge', label: 'Badge', tags: ['identity', 'credential', 'staff'] },
+    { name: 'fire', label: 'Fire', tags: ['hot', 'burn', 'danger'] },
+    { name: 'fire-extinguisher', label: 'Fire Extinguisher', tags: ['safety', 'emergency'] },
+    { name: 'triangle-exclamation', label: 'Warning', tags: ['alert', 'caution', 'danger'] },
+    { name: 'exclamation', label: 'Exclamation', tags: ['alert', 'important', 'warning'] },
+    { name: 'circle-exclamation', label: 'Alert', tags: ['warning', 'important'] },
+    { name: 'ban', label: 'Ban', tags: ['prohibited', 'forbidden', 'stop'] },
+    { name: 'circle-radiation', label: 'Radiation', tags: ['danger', 'hazard', 'warning'] },
+    { name: 'skull-crossbones', label: 'Danger', tags: ['hazard', 'poison', 'warning'] },
+    { name: 'biohazard', label: 'Biohazard', tags: ['danger', 'hazard', 'warning'] },
+    // Miscellaneous
+    { name: 'circle', label: 'Circle', tags: ['shape', 'round', 'dot'] },
+    { name: 'square', label: 'Square', tags: ['shape', 'box'] },
+    { name: 'square-full', label: 'Full Square', tags: ['shape', 'filled'] },
+    { name: 'circle-dot', label: 'Dot', tags: ['point', 'marker', 'bullet'] },
+    { name: 'question', label: 'Question', tags: ['help', 'ask', 'faq'] },
+    { name: 'circle-question', label: 'Help', tags: ['question', 'support', 'info'] },
+    { name: 'circle-info', label: 'Info', tags: ['information', 'details', 'about'] },
+    { name: 'info', label: 'Information', tags: ['info', 'details', 'help'] },
+    { name: 'lightbulb', label: 'Lightbulb', tags: ['idea', 'bright', 'innovation'] },
+    { name: 'bolt', label: 'Bolt', tags: ['lightning', 'fast', 'power'] },
+    { name: 'wand-magic', label: 'Magic Wand', tags: ['magic', 'wizard', 'sparkle'] },
+    { name: 'wand-magic-sparkles', label: 'Magic', tags: ['wizard', 'sparkle', 'enchant'] },
+    { name: 'puzzle-piece', label: 'Puzzle', tags: ['piece', 'solve', 'game'] },
+    { name: 'gamepad', label: 'Gamepad', tags: ['gaming', 'controller', 'play'] },
+    { name: 'dice', label: 'Dice', tags: ['game', 'random', 'chance'] },
+    { name: 'dice-d20', label: 'D20 Dice', tags: ['game', 'tabletop', 'rpg'] },
+    { name: 'chess', label: 'Chess', tags: ['game', 'strategy', 'board'] },
+    { name: 'spade', label: 'Spade', tags: ['cards', 'game', 'suit'] },
+    { name: 'heart', label: 'Heart Card', tags: ['cards', 'game', 'suit'] },
+    { name: 'diamond', label: 'Diamond', tags: ['cards', 'game', 'suit'] },
+    { name: 'club', label: 'Club', tags: ['cards', 'game', 'suit'] },
+    { name: 'palette', label: 'Palette', tags: ['color', 'art', 'paint'] },
+    { name: 'brush', label: 'Brush', tags: ['paint', 'art', 'draw'] },
+    { name: 'paintbrush', label: 'Paintbrush', tags: ['art', 'paint', 'draw'] },
+    { name: 'scissors', label: 'Scissors', tags: ['cut', 'trim', 'tool'] },
+    { name: 'crown', label: 'Crown', tags: ['king', 'royal', 'premium'] },
+    { name: 'gem', label: 'Gem', tags: ['diamond', 'jewel', 'precious'] },
+    { name: 'ring', label: 'Ring', tags: ['jewelry', 'wedding', 'engagement'] },
+    { name: 'mug-hot', label: 'Hot Drink', tags: ['coffee', 'tea', 'beverage'] },
+    { name: 'battery-full', label: 'Battery Full', tags: ['power', 'charge', 'energy'] },
+    { name: 'battery-half', label: 'Battery Half', tags: ['power', 'charge'] },
+    { name: 'battery-empty', label: 'Battery Empty', tags: ['power', 'low', 'charge'] },
+    { name: 'plug', label: 'Plug', tags: ['power', 'electricity', 'connect'] },
+    { name: 'magnet', label: 'Magnet', tags: ['attract', 'magnetic', 'pull'] },
+    { name: 'compass-drafting', label: 'Drafting Compass', tags: ['geometry', 'draw', 'circle'] },
+    { name: 'rotate', label: 'Rotate', tags: ['spin', 'turn', 'refresh'] },
+    { name: 'infinity', label: 'Infinity', tags: ['unlimited', 'endless', 'loop'] },
+];
+//#endregion
+//#region ----   Default Providers   ----
+/**
+ * Default icon provider that provides the base set of FontAwesome icons.
+ */
+class AXPIconProviderDefault extends AXPIconProvider {
+    async provide() {
+        return DEFAULT_ICONS;
+    }
+}
+/**
+ * Default icon style provider that provides the base set of FontAwesome styles.
+ */
+class AXPIconStyleProviderDefault extends AXPIconStyleProvider {
+    async provide() {
+        return DEFAULT_ICON_STYLES;
+    }
+}
+//#endregion
+
+//#region ----   Provider Functions   ----
+/**
+ * Provides the default icon provider to the application.
+ * This should be registered in your app module or config.
+ */
+function provideDefaultIconProvider() {
+    return {
+        provide: AXP_ICON_PROVIDER,
+        useClass: AXPIconProviderDefault,
+        multi: true,
+    };
+}
+/**
+ * Provides the default icon style provider to the application.
+ * This should be registered in your app module or config.
+ */
+function provideDefaultIconStyleProvider() {
+    return {
+        provide: AXP_ICON_STYLE_PROVIDER,
+        useClass: AXPIconStyleProviderDefault,
+        multi: true,
+    };
+}
+/**
+ * Provides both default icon and style providers to the application.
+ * This is a convenience function that combines provideDefaultIconProvider() and provideDefaultIconStyleProvider().
+ */
+function provideDefaultIconChooser() {
+    return [provideDefaultIconProvider(), provideDefaultIconStyleProvider()];
+}
+/**
+ * Provides a custom icon provider to the application.
+ * This ADDS additional icons alongside the default icon set.
+ *
+ * @param providerClass - The custom icon provider class
+ *
+ * @example
+ * ```typescript
+ * class MyCustomIconProvider extends AXPIconProvider {
+ *   async provide(): Promise<AXPFontAwesomeIcon[]> {
+ *     return [
+ *       { name: 'custom-icon', label: 'Custom Icon' }
+ *     ];
+ *   }
+ * }
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideCustomIconProvider(MyCustomIconProvider),
+ *   ]
+ * };
+ * ```
+ */
+function provideCustomIconProvider(providerClass) {
+    return {
+        provide: AXP_ICON_PROVIDER,
+        useClass: providerClass,
+        multi: true,
+    };
+}
+/**
+ * Provides a custom icon style provider to the application.
+ * This ADDS additional icon styles alongside the default styles.
+ *
+ * @param providerClass - The custom icon style provider class
+ *
+ * @example
+ * ```typescript
+ * class MyCustomIconStyleProvider extends AXPIconStyleProvider {
+ *   async provide(): Promise<AXPFontAwesomeIconStyle[]> {
+ *     return [
+ *       { name: 'fa-custom', label: 'Custom' }
+ *     ];
+ *   }
+ * }
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideCustomIconStyleProvider(MyCustomIconStyleProvider),
+ *   ]
+ * };
+ * ```
+ */
+function provideCustomIconStyleProvider(providerClass) {
+    return {
+        provide: AXP_ICON_STYLE_PROVIDER,
+        useClass: providerClass,
+        multi: true,
+    };
+}
+//#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" }] : /* 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]);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onOrientationClick(orientation) {
+        this.setValue(orientation.id);
+    }
+    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>
+          <i [class]="orientation.icon"></i>
+        </div>
+        <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 }); }
+}
+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>
+          <i [class]="orientation.icon"></i>
+        </div>
+        <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"] }]
+        }] });
+
+var menuOrientationChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMenuOrientationChooserWidgetComponent: AXPMenuOrientationChooserWidgetComponent
+});
+
+const AXPMenuOrientationChooserWidget = {
+    name: "menu-orientation-chooser",
+    title: "Menu Orientation Chooser",
+    icon: "fa-light fa-bars-staggered",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return menuOrientationChooserWidget_component; }).then((c) => c.AXPMenuOrientationChooserWidgetComponent),
+        },
+    }
+};
+
+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;
+}
+const DEFAULT_COLORS = generateDefaultColors();
+class AXPColorProviderDefault extends AXPColorProvider {
+    async provide() {
+        return DEFAULT_COLORS;
+    }
+}
+const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
+class AXPColorChooserService {
+    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;
+    }
+    async getColors() {
+        if (this.cache) {
+            return this.cache;
+        }
+        const allColors = [];
+        for (const resolver of this.providers) {
+            const result = await resolver.provide();
+            allColors.push(...result);
+        }
+        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
+        this.cache = uniqueColors;
+        return uniqueColors;
+    }
+    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();
+            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" }] : /* 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);
+        }
+    }
+    parseStringValue(value) {
+        const parts = value.trim().split(/\s+/);
+        if (parts.length !== 3) {
+            return null;
+        }
+        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: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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$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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "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">
+                <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-CHfrTtol.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+        },
+        view: {
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-BSmvnUVq.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+        },
+    },
+};
+
+class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.modes = signal([
+            { id: AXPThemeMode.Light, icon: 'fa-light fa-brightness' },
+            { id: AXPThemeMode.Dark, icon: 'fa-light fa-moon' },
+            { id: AXPThemeMode.System, icon: 'fa-light fa-desktop' },
+        ], ...(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" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onModeClick(mode) {
+        this.setValue(mode.id);
+    }
+    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>
+          <i [class]="mode.icon"></i>
+        </div>
+        <span>{{ '@layout:terms.theme-modes.' + mode.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 }); }
+}
+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) {
+      <div (click)="onModeClick(mode)" [class.--selected]="mode.id === selectedMode()?.id">
+        <div>
+          <i [class]="mode.icon"></i>
+        </div>
+        <span>{{ '@layout:terms.theme-modes.' + mode.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"] }]
+        }] });
+
+var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPThemeModeChooserWidgetComponent: AXPThemeModeChooserWidgetComponent
+});
+
+const AXPThemeModeChooserWidget = {
+    name: "theme-mode-chooser",
+    title: "Theme Mode Chooser",
+    icon: "fa-solid fa-square",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themeModeChooserWidget_component; }).then((c) => c.AXPThemeModeChooserWidgetComponent),
+        },
+    }
+};
+
+class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
+        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" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    async ngOnInit() {
+        super.ngOnInit();
+        const palletsProviderInstance = await this.paletteService;
+        this.palettes.set(await palletsProviderInstance.getList());
+    }
+    onPaletteClick(palette) {
+        this.setValue(palette.name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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>
+        <div>
+          <div [style.background-color]="palette.colors.primary" class="ax-end-7 ax-z-[2]"></div>
+          <div [style.background-color]="palette.colors.secondary" class="ax-end-3.5 ax-z-[1]"></div>
+          <div [style.background-color]="palette.colors.accents[0]" class="ax-end-0 ax-z-0"></div>
+        </div>
+      </div>
+    }
+  `, isInline: true, 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 }); }
+}
+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) {
+      <div (click)="onPaletteClick(palette)" [class.--selected]="palette.name === selectedPalette()?.name">
+        <span>{{ palette.title }}</span>
+        <div>
+          <div [style.background-color]="palette.colors.primary" class="ax-end-7 ax-z-[2]"></div>
+          <div [style.background-color]="palette.colors.secondary" class="ax-end-3.5 ax-z-[1]"></div>
+          <div [style.background-color]="palette.colors.accents[0]" class="ax-end-0 ax-z-0"></div>
+        </div>
+      </div>
+    }
+  `, 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"] }]
+        }] });
+
+var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPThemePaletteChooserWidgetComponent: AXPThemePaletteChooserWidgetComponent
+});
+
+const AXPThemePaletteChooserWidget = {
+    name: "theme-palette-chooser",
+    title: "Theme Palette Chooser",
+    icon: "fa-solid fa-square",
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themePaletteChooserWidget_component; }).then((c) => c.AXPThemePaletteChooserWidgetComponent),
+        },
+    }
+};
+
+//#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 ...',
+            priority: 100,
+            run: async () => {
+                await service.loadSettings();
+            },
+        });
+    }
+    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;
+                    return new provider(injector);
+                },
+                multi: true,
+            },
+            ...provideDefaultIconChooser(),
+        ], imports: [AXPComponentSlotModule.forRoot({
+                'root-header-end': [
+                    {
+                        priority: 50,
+                        name: 'theme',
+                        component: AXPThemeSlotComponent,
+                    },
+                ],
+            }),
+            AXPWidgetCoreModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        AXPComponentSlotModule.forRoot({
+                            'root-header-end': [
+                                {
+                                    priority: 50,
+                                    name: 'theme',
+                                    component: AXPThemeSlotComponent,
+                                },
+                            ],
+                        }),
+                        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;
+                                return new provider(injector);
+                            },
+                            multi: true,
+                        },
+                        ...provideDefaultIconChooser(),
+                    ],
+                }]
+        }], 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 };
+//# sourceMappingURL=acorex-platform-themes-shared.mjs.map