@acorex/platform 20.0.7 → 20.0.9

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

@@ -7,23 +7,29 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, Component, InjectionToken, signal, effect, ChangeDetectionStrategy, Injector, NgModule } from '@angular/core';
+import { computed, inject, Component, InjectionToken, signal, effect, ChangeDetectionStrategy, Injectable, Input, Injector, NgModule } from '@angular/core';
 import { AXPSettingService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, fromEvent, Subscription, filter } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
-import * as i1$1 from '@acorex/platform/core';
+import * as i1$2 from '@acorex/platform/core';
 import { AXPPlatformScope } from '@acorex/platform/core';
 import * as i2$1 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import * as i3$1 from '@acorex/platform/layout/builder';
-import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetGroupEnum, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import * as i2$3 from '@acorex/platform/layout/components';
+import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
 import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import { FormsModule } from '@angular/forms';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
-import * as i2$2 from '@acorex/platform/layout/components';
-import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i2$2 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';
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
@@ -396,8 +402,8 @@ class AXPThemeSlotComponent {
         this.store = inject(AXPLayoutThemeService);
         this.variants = AXPThemeMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     <ax-button color="primary">
       <ax-icon
         class="fa-regular "
@@ -442,7 +448,7 @@ class AXPThemeSlotComponent {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$1.AXTranslatorDirective, selector: "[translate]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -522,68 +528,54 @@ class AXPThemePaletteProviderDefault {
     }
 }
 
-class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
+class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
-        this.palettes = signal([]);
-        this.selectedPalette = signal(null);
+        this.sizes = signal(['small', 'medium', 'large', 'x-large']);
+        this.selectedSize = signal(null);
         this.#eff = effect(() => {
             if (this.getValue()) {
-                this.selectedPalette.set(this.palettes().find((p) => p.name === this.getValue()) ??
-                    this.palettes().find((p) => p.name === 'default') ??
-                    this.palettes()[0]);
+                this.selectedSize.set(this.sizes().find((s) => s === this.getValue()) ?? this.sizes()[0]);
             }
         });
     }
     #eff;
-    async ngOnInit() {
-        super.ngOnInit();
-        const palletsProviderInstance = await this.paletteService;
-        this.palettes.set(await palletsProviderInstance.getList());
-    }
-    onPaletteClick(palette) {
-        this.setValue(palette.name);
+    onSizeClick(size) {
+        this.setValue(size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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>
-          <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>
+          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</span>
         </div>
       </div>
     }
-  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{height:3rem;min-width:100%}@media (min-width: 768px){:host>div{min-width:16rem}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:2rem;width:2rem;border-radius:9999px;border-width:1px;border-color:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, 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>
+    @for (size of sizes(); track size) {
+      <div (click)="onSizeClick(size)" [style.font-size]="size" [class.--selected]="size === selectedSize()">
         <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>
+          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</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}:host>div{height:3rem;min-width:100%}@media (min-width: 768px){:host>div{min-width:16rem}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:2rem;width:2rem;border-radius:9999px;border-width:1px;border-color:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
+  `, 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 themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
+var fontSizeChooserWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPThemePaletteChooserWidgetComponent: AXPThemePaletteChooserWidgetComponent
+    AXPFontSizeChooserWidgetComponent: AXPFontSizeChooserWidgetComponent
 });
 
-const AXPThemePaletteChooserWidget = {
-    name: "theme-palette-chooser",
-    title: "Theme Palette Chooser",
-    icon: "fa-solid fa-square",
+const AXPFontSizeChooserWidget = {
+    name: "font-size-chooser",
+    title: "Font Size Chooser",
+    icon: "fa-light fa-text-size",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -593,65 +585,81 @@ const AXPThemePaletteChooserWidget = {
     ],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return themePaletteChooserWidget_component; }).then((c) => c.AXPThemePaletteChooserWidgetComponent),
+            component: () => Promise.resolve().then(function () { return fontSizeChooserWidget_component; }).then((c) => c.AXPFontSizeChooserWidgetComponent),
         },
     }
 };
 
-class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
+class AXPFontStyleChooserWidgetComponent 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' },
+        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 وزیر' },
         ]);
-        this.selectedMode = signal(null);
+        this.selectedFont = signal(null);
         this.#eff = effect(() => {
             if (this.getValue()) {
-                this.selectedMode.set(this.modes().find((m) => m.id === this.getValue()) ?? this.modes()[0]);
+                this.selectedFont.set(this.fonts().find((f) => f.id === this.getValue()) ?? this.fonts()[0]);
             }
         });
     }
     #eff;
-    onModeClick(mode) {
-        this.setValue(mode.id);
+    onFontClick(font) {
+        this.setValue(font.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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>
-          <i [class]="mode.icon"></i>
+          <span>{{ font.title }}</span>
         </div>
-        <span>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
       </div>
     }
-  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
-    @for (mode of modes(); track mode.id) {
-      <div (click)="onModeClick(mode)" [class.--selected]="mode.id === selectedMode()?.id">
+    @for (font of fonts(); track font.id) {
+      <div
+        (click)="onFontClick(font)"
+        [class.--selected]="font.id === selectedFont()?.id"
+        [style.font-family]="font.id"
+      >
         <div>
-          <i [class]="mode.icon"></i>
+          <span>{{ font.title }}</span>
         </div>
-        <span>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXSelectionCdkModule, AXTranslationModule], styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [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 themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
+var fontStyleChooserWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPThemeModeChooserWidgetComponent: AXPThemeModeChooserWidgetComponent
+    AXPFontStyleChooserWidgetComponent: AXPFontStyleChooserWidgetComponent
 });
 
-const AXPThemeModeChooserWidget = {
-    name: "theme-mode-chooser",
-    title: "Theme Mode Chooser",
-    icon: "fa-solid fa-square",
+const AXPFontStyleChooserWidget = {
+    name: "font-style-chooser",
+    title: "Font Style Chooser",
+    icon: "fa-light fa-font",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -661,11 +669,424 @@ const AXPThemeModeChooserWidget = {
     ],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return themeModeChooserWidget_component; }).then((c) => c.AXPThemeModeChooserWidgetComponent),
+            component: () => Promise.resolve().then(function () { return fontStyleChooserWidget_component; }).then((c) => c.AXPFontStyleChooserWidgetComponent),
         },
     }
 };
 
+class AXPIconProvider {
+}
+class AXPIconStyleProvider {
+}
+const DEFAULT_ICON_STYLES = [
+    { name: 'fa-solid', label: 'Solid' },
+    { name: 'fa-regular', label: 'Regular' },
+];
+const DEFAULT_ICONS = [
+    { name: 'house', label: 'House', tags: ['home', 'building'], supportedStyle: ['fa-regular'] },
+    { name: 'magnifying-glass', label: 'Search', tags: ['find', 'zoom'], supportedStyle: ['fa-solid'] },
+    { name: 'user', label: 'User', tags: ['person', 'account'] },
+    { name: 'check', label: 'Check', tags: ['confirm', 'done'] },
+    { name: 'xmark', label: 'Close', tags: ['cancel', 'exit'] },
+    { name: 'star', label: 'Star', tags: ['favorite', 'rate'] },
+    { name: 'heart', label: 'Heart', tags: ['love', 'like'] },
+    { name: 'cloud', label: 'Cloud', tags: ['weather', 'sky'] },
+    { name: 'envelope', label: 'Envelope', tags: ['mail', 'message'] },
+    { name: 'folder', label: 'Folder', tags: ['directory', 'files'] },
+    { name: 'gear', label: 'Gear', tags: ['settings', 'options'] },
+    { name: 'camera', label: 'Camera', tags: ['photo', 'image'] },
+    { name: 'video', label: 'Video', tags: ['film', 'movie'] },
+    { name: 'music', label: 'Music', tags: ['sound', 'audio'] },
+    { name: 'file-lines', label: 'File', tags: ['document', 'text'] },
+];
+class AXPIconProviderDefault extends AXPIconProvider {
+    async provide() {
+        return DEFAULT_ICONS;
+    }
+}
+class AXPIconStyleProviderDefault extends AXPIconStyleProvider {
+    async provide() {
+        return DEFAULT_ICON_STYLES;
+    }
+}
+const AXP_ICON_PROVIDER = new InjectionToken('AXP_ICON_PROVIDER');
+const AXP_ICON_STYLE_PROVIDER = new InjectionToken('AXP_ICON_STYLE_PROVIDER');
+class AXPIconChooserService {
+    constructor() {
+        this.defaultIconProvider = new AXPIconProviderDefault();
+        this.iconProviders = (() => {
+            const injected = inject(AXP_ICON_PROVIDER, { optional: true });
+            if (!injected) {
+                return [this.defaultIconProvider];
+            }
+            const providers = Array.isArray(injected) ? injected : [injected];
+            return [...providers, this.defaultIconProvider];
+        })();
+        this.defaultStyleProvider = new AXPIconStyleProviderDefault();
+        this.styleProviders = (() => {
+            const injected = inject(AXP_ICON_STYLE_PROVIDER, { optional: true });
+            if (!injected) {
+                return [this.defaultStyleProvider];
+            }
+            const providers = Array.isArray(injected) ? injected : [injected];
+            return [...providers, this.defaultStyleProvider];
+        })();
+        this.iconsCache = null;
+        this.stylesCache = null;
+    }
+    async getStyles() {
+        if (this.stylesCache) {
+            return this.stylesCache;
+        }
+        const allStyles = [];
+        for (const resolver of this.styleProviders) {
+            const result = await resolver.provide();
+            allStyles.push(...result);
+        }
+        const uniqueStyles = allStyles.filter((style, index, self) => index === self.findIndex((s) => s.name === style.name));
+        this.stylesCache = uniqueStyles;
+        return uniqueStyles;
+    }
+    async getIcons() {
+        if (this.iconsCache) {
+            return this.iconsCache;
+        }
+        const allIcons = [];
+        for (const resolver of this.iconProviders) {
+            const result = await resolver.provide();
+            allIcons.push(...result);
+        }
+        const uniqueIcons = allIcons.filter((icon, index, self) => index === self.findIndex((i) => i.name === icon.name));
+        this.iconsCache = uniqueIcons;
+        return uniqueIcons;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserService, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPIconChooserPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.icons = [];
+        this.filteredIcons = [];
+        this.searchQuery = '';
+        this.viewModes = [
+            { value: 'square', text: 'Square View', icon: 'fa-solid fa-border-all' },
+            {
+                value: 'rectangle',
+                text: 'Rectangle View',
+                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(this.getIconClass(icon));
+    }
+    getIconClass(icon) {
+        return `${this.selectedIconType} fa-${icon.name}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, providers: [AXPIconChooserService], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-p-4 ax-gap-4 ax-bg-lightest">
+      <div class="ax-flex ax-justify-center">
+        <ax-search-box
+          class="ax-w-full md:ax-w-1/2"
+          (onValueChanged)="handleSearch($event)"
+          placeholder="Search for icons..."
+        ></ax-search-box>
+      </div>
+
+      <div class="ax-flex ax-justify-between ax-items-center ax-flex-wrap ax-gap-2">
+        <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>
+
+        <ax-button-group selection="single" look="outline">
+          @for (item of viewModes; track item.value) {
+            <ax-button-group-item
+              [title]="item.text"
+              [selected]="item.value === selectedViewMode"
+              (onClick)="handleViewModeChange(item)"
+            >
+              <ax-icon [class]="item.icon"></ax-icon>
+            </ax-button-group-item>
+          }
+        </ax-button-group>
+      </div>
+
+      <div class="ax-flex-1 ax-overflow-y-auto ax-pr-2">
+        <div
+          class="ax-grid ax-gap-4"
+          [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"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-p-4 ax-gap-4 ax-bg-lightest">
+      <div class="ax-flex ax-justify-center">
+        <ax-search-box
+          class="ax-w-full md:ax-w-1/2"
+          (onValueChanged)="handleSearch($event)"
+          placeholder="Search for icons..."
+        ></ax-search-box>
+      </div>
+
+      <div class="ax-flex ax-justify-between ax-items-center ax-flex-wrap ax-gap-2">
+        <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>
+
+        <ax-button-group selection="single" look="outline">
+          @for (item of viewModes; track item.value) {
+            <ax-button-group-item
+              [title]="item.text"
+              [selected]="item.value === selectedViewMode"
+              (onClick)="handleViewModeChange(item)"
+            >
+              <ax-icon [class]="item.icon"></ax-icon>
+            </ax-button-group-item>
+          }
+        </ax-button-group>
+      </div>
+
+      <div class="ax-flex-1 ax-overflow-y-auto ax-pr-2">
+        <div
+          class="ax-grid ax-gap-4"
+          [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],
+                    providers: [AXPIconChooserService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class AXPIconChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+    }
+    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);
+        }
+    }
+    addIcon() {
+        if (!this.getValue()) {
+            this.openPopup();
+        }
+    }
+    deleteIcon() {
+        this.setValue(null);
+    }
+    editIcon() {
+        this.openPopup();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPIconChooserWidgetComponent, isStandalone: true, selector: "ax-icon-chooser-widget", usesInheritance: true, ngImport: i0, template: `<div class="ax-p-4 ax-w-fit">
+    <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() || '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>
+  </div> `, isInline: true, styles: [":host{display:block;height:100%}.icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-icon-chooser-widget', template: `<div class="ax-p-4 ax-w-fit">
+    <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() || '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>
+  </div> `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;height:100%}.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 iconChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPIconChooserWidgetComponent: AXPIconChooserWidgetComponent
+});
+
+const AXPIconChooserWidget = {
+    name: 'icon-chooser',
+    title: 'Icon Chooser',
+    icon: 'fa-solid fa-icons',
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return iconChooserWidget_component; }).then((c) => c.AXPIconChooserWidgetComponent),
+        },
+    },
+};
+
 class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -684,8 +1105,8 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     onOrientationClick(orientation) {
         this.setValue(orientation.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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>
@@ -696,7 +1117,7 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     }
   `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (orientation of orientations(); track orientation.id) {
@@ -733,76 +1154,60 @@ const AXPMenuOrientationChooserWidget = {
     }
 };
 
-class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
+class AXPThemeModeChooserWidgetComponent 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 وزیر' },
+        this.modes = signal([
+            { id: AXPThemeMode.Light, icon: 'fa-light fa-brightness' },
+            { id: AXPThemeMode.Dark, icon: 'fa-light fa-moon' },
+            { id: AXPThemeMode.System, icon: 'fa-light fa-desktop' },
         ]);
-        this.selectedFont = signal(null);
+        this.selectedMode = signal(null);
         this.#eff = effect(() => {
             if (this.getValue()) {
-                this.selectedFont.set(this.fonts().find((f) => f.id === this.getValue()) ?? this.fonts()[0]);
+                this.selectedMode.set(this.modes().find((m) => m.id === this.getValue()) ?? this.modes()[0]);
             }
         });
     }
     #eff;
-    onFontClick(font) {
-        this.setValue(font.id);
+    onModeClick(mode) {
+        this.setValue(mode.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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"
-      >
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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>
-          <span>{{ font.title }}</span>
+          <i [class]="mode.icon"></i>
         </div>
+        <span>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
       </div>
     }
-  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{padding-top:.25rem!important;padding-bottom:.25rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, 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"
-      >
+    @for (mode of modes(); track mode.id) {
+      <div (click)="onModeClick(mode)" [class.--selected]="mode.id === selectedMode()?.id">
         <div>
-          <span>{{ font.title }}</span>
+          <i [class]="mode.icon"></i>
         </div>
+        <span>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
       </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"] }]
+  `, 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 fontStyleChooserWidget_component = /*#__PURE__*/Object.freeze({
+var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPFontStyleChooserWidgetComponent: AXPFontStyleChooserWidgetComponent
+    AXPThemeModeChooserWidgetComponent: AXPThemeModeChooserWidgetComponent
 });
 
-const AXPFontStyleChooserWidget = {
-    name: "font-style-chooser",
-    title: "Font Style Chooser",
-    icon: "fa-light fa-font",
+const AXPThemeModeChooserWidget = {
+    name: "theme-mode-chooser",
+    title: "Theme Mode Chooser",
+    icon: "fa-solid fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -812,59 +1217,73 @@ const AXPFontStyleChooserWidget = {
     ],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return fontStyleChooserWidget_component; }).then((c) => c.AXPFontStyleChooserWidgetComponent),
+            component: () => Promise.resolve().then(function () { return themeModeChooserWidget_component; }).then((c) => c.AXPThemeModeChooserWidgetComponent),
         },
     }
 };
 
-class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
+class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.sizes = signal(['small', 'medium', 'large', 'x-large']);
-        this.selectedSize = signal(null);
+        this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.palettes = signal([]);
+        this.selectedPalette = signal(null);
         this.#eff = effect(() => {
             if (this.getValue()) {
-                this.selectedSize.set(this.sizes().find((s) => s === this.getValue()) ?? this.sizes()[0]);
+                this.selectedPalette.set(this.palettes().find((p) => p.name === this.getValue()) ??
+                    this.palettes().find((p) => p.name === 'default') ??
+                    this.palettes()[0]);
             }
         });
     }
     #eff;
-    onSizeClick(size) {
-        this.setValue(size);
+    async ngOnInit() {
+        super.ngOnInit();
+        const palletsProviderInstance = await this.paletteService;
+        this.palettes.set(await palletsProviderInstance.getList());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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()">
+    onPaletteClick(palette) {
+        this.setValue(palette.name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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>
-          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</span>
+          <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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem 1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}:host>div:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}:host>div{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}:host>div:hover{background-color:rgb(var(--ax-sys-color-dark-surface));color:rgb(var(--ax-sys-color-on-dark-surface));border-color:rgb(var(--ax-sys-color-border-dark-surface))}:host>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface));border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:1.25rem;line-height:1.75rem}:host>div>span{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1.625}:host>div{height:3rem;min-width:100%}@media (min-width: 768px){:host>div{min-width:16rem}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:2rem;width:2rem;border-radius:9999px;border-width:1px;border-color:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
-    @for (size of sizes(); track size) {
-      <div (click)="onSizeClick(size)" [style.font-size]="size" [class.--selected]="size === selectedSize()">
+    @for (palette of palettes(); track palette.name) {
+      <div (click)="onPaletteClick(palette)" [class.--selected]="palette.name === selectedPalette()?.name">
+        <span>{{ palette.title }}</span>
         <div>
-          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</span>
+          <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: [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"] }]
+  `, 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:rgba(255,255,255,.5);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
         }] });
 
-var fontSizeChooserWidget_component = /*#__PURE__*/Object.freeze({
+var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPFontSizeChooserWidgetComponent: AXPFontSizeChooserWidgetComponent
+    AXPThemePaletteChooserWidgetComponent: AXPThemePaletteChooserWidgetComponent
 });
 
-const AXPFontSizeChooserWidget = {
-    name: "font-size-chooser",
-    title: "Font Size Chooser",
-    icon: "fa-light fa-text-size",
+const AXPThemePaletteChooserWidget = {
+    name: "theme-palette-chooser",
+    title: "Theme Palette Chooser",
+    icon: "fa-solid fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -874,7 +1293,7 @@ const AXPFontSizeChooserWidget = {
     ],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return fontSizeChooserWidget_component; }).then((c) => c.AXPFontSizeChooserWidgetComponent),
+            component: () => Promise.resolve().then(function () { return themePaletteChooserWidget_component; }).then((c) => c.AXPThemePaletteChooserWidgetComponent),
         },
     }
 };
@@ -888,12 +1307,12 @@ class AXPThemesSharedModule {
             priority: 100,
             run: async () => {
                 await service.loadSettings();
-            }
+            },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$1.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$2.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemesSharedModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$2.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$3.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
@@ -901,8 +1320,8 @@ class AXPThemesSharedModule {
                     const provider = (await import('./acorex-platform-themes-shared-settings.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
-                multi: true
-            }
+                multi: true,
+            },
         ], imports: [AXPComponentSlotModule.forRoot({
                 'root-header-end': [
                     {
@@ -918,11 +1337,12 @@ class AXPThemesSharedModule {
                     AXPThemeModeChooserWidget,
                     AXPMenuOrientationChooserWidget,
                     AXPFontSizeChooserWidget,
-                    AXPFontStyleChooserWidget
-                ]
+                    AXPFontStyleChooserWidget,
+                    AXPIconChooserWidget,
+                ],
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -941,9 +1361,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 AXPThemeModeChooserWidget,
                                 AXPMenuOrientationChooserWidget,
                                 AXPFontSizeChooserWidget,
-                                AXPFontStyleChooserWidget
-                            ]
-                        })
+                                AXPFontStyleChooserWidget,
+                                AXPIconChooserWidget,
+                            ],
+                        }),
                     ],
                     exports: [],
                     declarations: [],
@@ -955,11 +1376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 const provider = (await import('./acorex-platform-themes-shared-settings.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * Generated bundle index. Do not edit.