@acorex/platform 20.3.0-next.0 → 20.3.0-next.10

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

@@ -425,8 +425,8 @@ class AXPThemeSlotComponent {
         this.store = inject(AXPLayoutThemeService);
         this.variants = AXPThemeMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     <ax-button color="primary">
       <ax-icon
         class="fa-regular "
@@ -441,7 +441,7 @@ class AXPThemeSlotComponent {
         <ax-button-item-list>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Light)"
-            [text]="(t('theme-modes.light',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.light' | translate | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
             <ax-prefix>
@@ -450,7 +450,7 @@ class AXPThemeSlotComponent {
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Dark)"
-            [text]="(t('theme-modes.dark',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.dark' | translate | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
             <ax-prefix>
@@ -459,7 +459,7 @@ class AXPThemeSlotComponent {
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.System)"
-            [text]="(t('theme-modes.system',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.system' | translate | async)!"
             [selected]="store.isSystemMode()"
           >
             <ax-prefix>
@@ -469,9 +469,9 @@ class AXPThemeSlotComponent {
         </ax-button-item-list>
       </ax-dropdown-panel>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, 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"], 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]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -489,7 +489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         <ax-button-item-list>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Light)"
-            [text]="(t('theme-modes.light',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.light' | translate | async)!"
             [selected]="!store.isSystemMode() && !store.isDarkMode()"
           >
             <ax-prefix>
@@ -498,7 +498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.Dark)"
-            [text]="(t('theme-modes.dark',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.dark' | translate | async)!"
             [selected]="!store.isSystemMode() && store.isDarkMode()"
           >
             <ax-prefix>
@@ -507,7 +507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
           </ax-button-item>
           <ax-button-item
             (onClick)="store.changeThemeMode(variants.System)"
-            [text]="(t('theme-modes.system',{scope:'layout'}) | async)!"
+            [text]="('@layout:theme-modes.system' | translate | async)!"
             [selected]="store.isSystemMode()"
           >
             <ax-prefix>
@@ -624,10 +624,10 @@ class AXPColorChooserService {
         this.cache = uniqueColors;
         return uniqueColors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorChooserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColorChooserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -639,12 +639,22 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.colorService = inject(AXPColorChooserService);
         this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
+        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.selectedColor = computed(() => {
-            const color = this.getValue();
-            if (typeof color === 'string') {
-                return color;
+            const value = this.getValue();
+            if (!value) {
+                return this.colors()[0];
             }
-            return color?.name;
+            // 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" }] : []));
     }
     async ngOnInit() {
@@ -658,21 +668,30 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
                 this.setValue(undefined);
                 return;
             }
-            // const color = this.colors().find((c) => c.name === event.value);
             const color = event.component.selectedItems[0];
-            this.setValue(color);
+            // Always store as ordered string: "color background border"
+            const stringValue = `${color.color} ${color.background} ${color.border}`;
+            this.setValue(stringValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-p-4">
+    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: "20.1.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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]="options()?.placeholder || 'Select a color...'"
+            [placeholder]="placeholder()"
             [itemTemplate]="customItemTemplate"
             [ngModel]="selectedColor()"
             (onValueChanged)="handleValueChange($event)"
@@ -694,22 +713,20 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
           </ax-select-box>
         </ax-form-field>
       </ax-form>
-    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: ["labelMode", "look", "messageStyle", "updateOn"], 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: i4$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: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-chooser-widget',
                     template: `
-    <div class="ax-p-4">
       <ax-form [messageStyle]="'float'" [updateOn]="'change'">
         <ax-form-field>
           <ax-select-box
             [dataSource]="colors()"
             textField="title"
             valueField="name"
-            [placeholder]="options()?.placeholder || 'Select a color...'"
+            [placeholder]="placeholder()"
             [itemTemplate]="customItemTemplate"
             [ngModel]="selectedColor()"
             (onValueChanged)="handleValueChange($event)"
@@ -731,7 +748,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
           </ax-select-box>
         </ax-form-field>
       </ax-form>
-    </div>
   `,
                     imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -755,10 +771,10 @@ const AXPThemeColorChooserWidgetConfig = {
             component: () => Promise.resolve().then(function () { return themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-DjKLg513.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-AeOQxjbS.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
         },
         view: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-DE0wO98F.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-DEVzRd6-.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
         },
     },
 };
@@ -778,24 +794,24 @@ class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
     onSizeClick(size) {
         this.setValue(size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFontSizeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPFontSizeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (size of sizes(); track size) {
       <div (click)="onSizeClick(size)" [style.font-size]="size" [class.--selected]="size === selectedSize()">
         <div>
-          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</span>
+          <span>{{ '@layout: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: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (size of sizes(); track size) {
       <div (click)="onSizeClick(size)" [style.font-size]="size" [class.--selected]="size === selectedSize()">
         <div>
-          <span>{{ 'font-sizes.' + size | translate: { scope: 'layout' } | async }}</span>
+          <span>{{ '@layout:font-sizes.' + size | translate | async }}</span>
         </div>
       </div>
     }
@@ -854,8 +870,8 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
     onFontClick(font) {
         this.setValue(font.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (font of fonts(); track font.id) {
       <div
         (click)="onFontClick(font)"
@@ -869,7 +885,7 @@ class AXPFontStyleChooserWidgetComponent 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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (font of fonts(); track font.id) {
@@ -918,11 +934,24 @@ const DEFAULT_ICON_STYLES = [
     { name: 'fa-regular', label: 'Regular' },
 ];
 const DEFAULT_ICONS = [
+    // Navigation & Actions
     { 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: 'plus', label: 'Add', tags: ['create', 'new', 'plus'] },
+    { name: 'minus', label: 'Remove', tags: ['delete', 'subtract', 'minus'] },
+    { name: 'edit', label: 'Edit', tags: ['modify', 'change', 'pencil'] },
+    { name: 'trash', label: 'Delete', tags: ['remove', 'delete', 'bin'] },
+    { name: 'copy', label: 'Copy', tags: ['duplicate', 'clone'] },
+    { 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: 'link', label: 'Link', tags: ['url', 'connection'] },
+    { name: 'external-link', label: 'External Link', tags: ['open', 'external'] },
+    // Media & Files
     { name: 'star', label: 'Star', tags: ['favorite', 'rate'] },
     { name: 'heart', label: 'Heart', tags: ['love', 'like'] },
     { name: 'cloud', label: 'Cloud', tags: ['weather', 'sky'] },
@@ -933,6 +962,128 @@ const DEFAULT_ICONS = [
     { name: 'video', label: 'Video', tags: ['film', 'movie'] },
     { name: 'music', label: 'Music', tags: ['sound', 'audio'] },
     { name: 'file-lines', label: 'File', tags: ['document', 'text'] },
+    { name: 'file-pdf', label: 'PDF', tags: ['document', 'pdf'] },
+    { name: 'file-image', label: 'Image', tags: ['picture', 'photo'] },
+    { name: 'file-video', label: 'Video File', tags: ['movie', 'clip'] },
+    { name: 'file-audio', label: 'Audio File', tags: ['sound', 'music'] },
+    { name: 'file-zipper', label: 'Archive', tags: ['zip', 'compressed'] },
+    { name: 'image', label: 'Image', tags: ['picture', 'photo'] },
+    { name: 'images', label: 'Images', tags: ['gallery', 'photos'] },
+    // Communication & Social
+    { name: 'phone', label: 'Phone', tags: ['call', 'telephone'] },
+    { name: 'mobile', label: 'Mobile', tags: ['cell', 'smartphone'] },
+    { name: 'comment', label: 'Comment', tags: ['message', 'chat'] },
+    { name: 'comments', label: 'Comments', tags: ['messages', 'discussion'] },
+    { name: 'thumbs-up', label: 'Like', tags: ['approve', 'good'] },
+    { name: 'thumbs-down', label: 'Dislike', tags: ['disapprove', 'bad'] },
+    { name: 'bell', label: 'Notification', tags: ['alert', 'reminder'] },
+    { name: 'flag', label: 'Flag', tags: ['mark', 'report'] },
+    { name: 'bookmark', label: 'Bookmark', tags: ['save', 'favorite'] },
+    { name: 'calendar', label: 'Calendar', tags: ['date', 'schedule'] },
+    { name: 'clock', label: 'Clock', tags: ['time', 'schedule'] },
+    // Business & Finance
+    { name: 'chart-line', label: 'Chart', tags: ['graph', 'analytics'] },
+    { name: 'chart-bar', label: 'Bar Chart', tags: ['graph', 'statistics'] },
+    { name: 'chart-pie', label: 'Pie Chart', tags: ['graph', 'percentage'] },
+    { name: 'calculator', label: 'Calculator', tags: ['math', 'compute'] },
+    { name: 'dollar-sign', label: 'Dollar', tags: ['money', 'currency'] },
+    { name: 'credit-card', label: 'Credit Card', tags: ['payment', 'card'] },
+    { name: 'receipt', label: 'Receipt', tags: ['bill', 'invoice'] },
+    { name: 'briefcase', label: 'Briefcase', tags: ['business', 'work'] },
+    { name: 'building', label: 'Building', tags: ['office', 'company'] },
+    { name: 'handshake', label: 'Handshake', tags: ['agreement', 'partnership'] },
+    // Technology & Tools
+    { name: 'laptop', label: 'Laptop', tags: ['computer', 'notebook'] },
+    { name: 'desktop', label: 'Desktop', tags: ['computer', 'monitor'] },
+    { name: 'tablet', label: 'Tablet', tags: ['ipad', 'device'] },
+    { name: 'keyboard', label: 'Keyboard', tags: ['input', 'typing'] },
+    { name: 'mouse', label: 'Mouse', tags: ['pointer', 'click'] },
+    { name: 'wifi', label: 'WiFi', tags: ['internet', 'connection'] },
+    { name: 'database', label: 'Database', tags: ['data', 'storage'] },
+    { name: 'server', label: 'Server', tags: ['hosting', 'backend'] },
+    { name: 'code', label: 'Code', tags: ['programming', 'development'] },
+    { name: 'bug', label: 'Bug', tags: ['error', 'debug'] },
+    { name: 'shield', label: 'Shield', tags: ['security', 'protection'] },
+    { name: 'lock', label: 'Lock', tags: ['security', 'private'] },
+    { name: 'unlock', label: 'Unlock', tags: ['open', 'access'] },
+    { name: 'key', label: 'Key', tags: ['access', 'password'] },
+    // Transportation & Location
+    { name: 'car', label: 'Car', tags: ['vehicle', 'automobile'] },
+    { name: 'truck', label: 'Truck', tags: ['vehicle', 'delivery'] },
+    { name: 'plane', label: 'Plane', tags: ['aircraft', 'travel'] },
+    { name: 'train', label: 'Train', tags: ['railway', 'transport'] },
+    { name: 'ship', label: 'Ship', tags: ['boat', 'vessel'] },
+    { name: 'bicycle', label: 'Bicycle', tags: ['bike', 'cycle'] },
+    { name: 'map', label: 'Map', tags: ['location', 'navigation'] },
+    { name: 'map-pin', label: 'Location', tags: ['pin', 'marker'] },
+    { name: 'globe', label: 'Globe', tags: ['world', 'earth'] },
+    { name: 'compass', label: 'Compass', tags: ['direction', 'navigation'] },
+    // Health & Medical
+    { name: 'heart-pulse', label: 'Heart Rate', tags: ['health', 'medical'] },
+    { name: 'stethoscope', label: 'Stethoscope', tags: ['medical', 'doctor'] },
+    { name: 'pills', label: 'Pills', tags: ['medicine', 'drugs'] },
+    { name: 'syringe', label: 'Syringe', tags: ['injection', 'medical'] },
+    { name: 'bandage', label: 'Bandage', tags: ['first aid', 'wound'] },
+    { name: 'hospital', label: 'Hospital', tags: ['medical', 'healthcare'] },
+    // Education & Learning
+    { name: 'graduation-cap', label: 'Graduation', tags: ['education', 'degree'] },
+    { name: 'book', label: 'Book', tags: ['reading', 'education'] },
+    { name: 'book-open', label: 'Open Book', tags: ['reading', 'study'] },
+    { name: 'pen', label: 'Pen', tags: ['write', 'draw'] },
+    { name: 'pencil', label: 'Pencil', tags: ['write', 'draw'] },
+    { name: 'highlighter', label: 'Highlighter', tags: ['mark', 'emphasize'] },
+    { name: 'ruler', label: 'Ruler', tags: ['measure', 'straight'] },
+    { name: 'microscope', label: 'Microscope', tags: ['science', 'research'] },
+    // Food & Dining
+    { name: 'utensils', label: 'Utensils', tags: ['food', 'dining'] },
+    { name: 'pizza-slice', label: 'Pizza', tags: ['food', 'slice'] },
+    { name: 'coffee', label: 'Coffee', tags: ['drink', 'beverage'] },
+    { name: 'wine-glass', label: 'Wine', tags: ['drink', 'alcohol'] },
+    { name: 'cake', label: 'Cake', tags: ['dessert', 'sweet'] },
+    { name: 'apple', label: 'Apple', tags: ['fruit', 'healthy'] },
+    // Sports & Recreation
+    { name: 'football', label: 'Football', tags: ['sport', 'soccer'] },
+    { name: 'basketball', label: 'Basketball', tags: ['sport', 'ball'] },
+    { name: 'baseball', label: 'Baseball', tags: ['sport', 'ball'] },
+    { name: 'tennis-ball', label: 'Tennis', tags: ['sport', 'racket'] },
+    { name: 'swimming-pool', label: 'Swimming', tags: ['sport', 'water'] },
+    { name: 'dumbbell', label: 'Dumbbell', tags: ['fitness', 'weight'] },
+    // Weather & Nature
+    { name: 'sun', label: 'Sun', tags: ['weather', 'bright'] },
+    { name: 'moon', label: 'Moon', tags: ['night', 'dark'] },
+    { name: 'cloud-sun', label: 'Partly Cloudy', tags: ['weather', 'mixed'] },
+    { name: 'cloud-rain', label: 'Rain', tags: ['weather', 'precipitation'] },
+    { name: 'snowflake', label: 'Snow', tags: ['weather', 'cold'] },
+    { name: 'bolt', label: 'Lightning', tags: ['weather', 'storm'] },
+    { name: 'tree', label: 'Tree', tags: ['nature', 'plant'] },
+    { name: 'leaf', label: 'Leaf', tags: ['nature', 'plant'] },
+    { name: 'flower', label: 'Flower', tags: ['nature', 'plant'] },
+    // Shopping & Commerce
+    { name: 'shopping-cart', label: 'Shopping Cart', tags: ['buy', 'purchase'] },
+    { name: 'bag-shopping', label: 'Shopping Bag', tags: ['buy', 'store'] },
+    { name: 'tags', label: 'Tags', tags: ['price', 'label'] },
+    { name: 'percent', label: 'Percent', tags: ['discount', 'sale'] },
+    { name: 'gift', label: 'Gift', tags: ['present', 'surprise'] },
+    { name: 'box', label: 'Box', tags: ['package', 'container'] },
+    // Security & Safety
+    { name: 'eye', label: 'Eye', tags: ['view', 'watch'] },
+    { name: 'eye-slash', label: 'Hide', tags: ['hidden', 'invisible'] },
+    { name: 'user-secret', label: 'Secret User', tags: ['anonymous', 'hidden'] },
+    { name: 'fingerprint', label: 'Fingerprint', tags: ['biometric', 'identity'] },
+    { name: 'fire', label: 'Fire', tags: ['hot', 'burn'] },
+    { name: 'warning', label: 'Warning', tags: ['alert', 'caution'] },
+    { name: 'exclamation-triangle', label: 'Exclamation', tags: ['warning', 'alert'] },
+    // Miscellaneous
+    { name: 'question', label: 'Question', tags: ['help', 'ask'] },
+    { name: 'info', label: 'Info', tags: ['information', 'details'] },
+    { name: 'lightbulb', label: 'Lightbulb', tags: ['idea', 'bright'] },
+    { name: 'magic-wand', label: 'Magic Wand', tags: ['magic', 'wish'] },
+    { name: 'puzzle-piece', label: 'Puzzle', tags: ['piece', 'solve'] },
+    { name: 'gamepad', label: 'Gamepad', tags: ['gaming', 'controller'] },
+    { name: 'dice', label: 'Dice', tags: ['game', 'random'] },
+    { name: 'palette', label: 'Palette', tags: ['color', 'art'] },
+    { name: 'brush', label: 'Brush', tags: ['paint', 'art'] },
+    { name: 'scissors', label: 'Scissors', tags: ['cut', 'trim'] },
 ];
 class AXPIconProviderDefault extends AXPIconProvider {
     async provide() {
@@ -995,10 +1146,10 @@ class AXPIconChooserService {
         this.iconsCache = uniqueIcons;
         return uniqueIcons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserService, decorators: [{
             type: Injectable
         }] });
 
@@ -1062,8 +1213,8 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
     getIconClass(icon) {
         return `${this.selectedIconType} fa-${icon.name}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, providers: [AXPIconChooserService], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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
@@ -1132,7 +1283,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$3.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.1.6", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1215,6 +1366,22 @@ 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" }] : []));
     }
     async openPopup() {
         const result = await this.popupService.open(AXPIconChooserPopupComponent, {
@@ -1225,7 +1392,7 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
             },
         });
         if (result?.data) {
-            this.setValue(result.data);
+            this.setValue(result.data.styleClass + ' ' + result.data.iconClass);
         }
     }
     addIcon() {
@@ -1239,8 +1406,8 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
     editIcon() {
         this.openPopup();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPIconChooserWidgetEditComponent, isStandalone: true, selector: "ax-icon-chooser-edit", usesInheritance: true, ngImport: i0, template: `<div class="ax-p-4 ax-w-fit">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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()"
@@ -1251,7 +1418,7 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
         [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
         (click)="addIcon()"
       >
-        <i [class]="getValue() ? getValue().styleClass + ' ' + getValue().iconClass : 'fa-solid fa-plus'"></i>
+        <i [class]="getValue() ? computedValue().styleClass + ' ' + computedValue().iconClass : 'fa-solid fa-plus'"></i>
       </div>
 
       <!-- Right: Edit & Delete (only if value exists) -->
@@ -1269,11 +1436,11 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
         </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 }); }
+   `, isInline: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-icon-chooser-edit', template: `<div class="ax-p-4 ax-w-fit">
+            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()"
@@ -1284,7 +1451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
         (click)="addIcon()"
       >
-        <i [class]="getValue() ? getValue().styleClass + ' ' + getValue().iconClass : 'fa-solid fa-plus'"></i>
+        <i [class]="getValue() ? computedValue().styleClass + ' ' + computedValue().iconClass : 'fa-solid fa-plus'"></i>
       </div>
 
       <!-- Right: Edit & Delete (only if value exists) -->
@@ -1302,7 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         </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"] }]
+   `, 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({
@@ -1322,10 +1489,10 @@ const AXPIconChooserWidget = {
             component: () => Promise.resolve().then(function () { return iconChooserEdit_component; }).then((c) => c.AXPIconChooserWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-C833prGO.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-BgEh06Tn.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
         },
         view: {
-            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-C833prGO.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-BgEh06Tn.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
         },
     },
 };
@@ -1348,19 +1515,19 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
     onOrientationClick(orientation) {
         this.setValue(orientation.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (orientation of orientations(); track orientation.id) {
       <div (click)="onOrientationClick(orientation)" [class.--selected]="orientation.id === selectedOrientation()?.id">
         <div>
           <i [class]="orientation.icon"></i>
         </div>
-        <span>{{ 'menu-modes.' + orientation.id | translate: { scope: 'layout' } | async }}</span>
+        <span>{{ '@layout: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: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (orientation of orientations(); track orientation.id) {
@@ -1368,7 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         <div>
           <i [class]="orientation.icon"></i>
         </div>
-        <span>{{ 'menu-modes.' + orientation.id | translate: { scope: 'layout' } | async }}</span>
+        <span>{{ '@layout: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"] }]
@@ -1416,19 +1583,19 @@ class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
     onModeClick(mode) {
         this.setValue(mode.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPThemeModeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
+        <span>{{ '@layout: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: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (mode of modes(); track mode.id) {
@@ -1436,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         <div>
           <i [class]="mode.icon"></i>
         </div>
-        <span>{{ 'theme-modes.' + mode.id | translate: { scope: 'layout' } | async }}</span>
+        <span>{{ '@layout: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"] }]
@@ -1488,8 +1655,8 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     onPaletteClick(palette) {
         this.setValue(palette.name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPThemePaletteChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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>
@@ -1502,7 +1669,7 @@ class AXPThemePaletteChooserWidgetComponent 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{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.1.6", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (palette of palettes(); track palette.name) {
@@ -1553,14 +1720,14 @@ class AXPThemesSharedModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", 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.1.6", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$4.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemesSharedModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", 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.1.8", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$4.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-CLUKU4y0.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -1586,7 +1753,7 @@ class AXPThemesSharedModule {
                 ],
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1618,7 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useFactory: async () => {
                                 const injector = inject(Injector);
-                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-CXiRmniv.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-CLUKU4y0.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,