@acorex/platform 21.0.0-next.39 → 21.0.0-next.41

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

@@ -25,7 +25,7 @@ import * as i1$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/layout/widgets';
 import { AXSelectionCdkModule } from '@acorex/cdk/selection';
-import * as i5$1 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
@@ -883,7 +883,7 @@ var iconChooserEdit_component = /*#__PURE__*/Object.freeze({
 const AXPIconChooserWidget = {
     name: 'icon-chooser',
     title: 'Icon Chooser',
-    icon: 'fa-solid fa-icons',
+    icon: 'fa-light fa-icons',
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
@@ -1653,78 +1653,153 @@ const AXPMenuOrientationChooserWidget = {
     }
 };
 
-class AXPColorProvider {
+//#endregion
+//#region ---- Color utilities ----
+function hexToRgb(hex) {
+    const normalized = hex.trim().replace(/^#/, '');
+    const full = normalized.length === 3
+        ? normalized
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : normalized;
+    return [
+        parseInt(full.slice(0, 2), 16),
+        parseInt(full.slice(2, 4), 16),
+        parseInt(full.slice(4, 6), 16),
+    ];
+}
+function rgbToHex(r, g, b) {
+    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+    return `#${[clamp(r), clamp(g), clamp(b)]
+        .map((c) => c.toString(16).padStart(2, '0'))
+        .join('')}`;
+}
+/**
+ * Linear RGB mix: ratio 0 → `from`, ratio 1 → `to`.
+ */
+function mixHex(from, to, ratio) {
+    const t = Math.max(0, Math.min(1, ratio));
+    const [r0, g0, b0] = hexToRgb(from);
+    const [r1, g1, b1] = hexToRgb(to);
+    return rgbToHex(r0 + (r1 - r0) * t, g0 + (g1 - g0) * t, b0 + (b1 - b0) * t);
+}
+function relativeLuminance(hex) {
+    const [r, g, b] = hexToRgb(hex).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastForeground(backgroundHex) {
+    return relativeLuminance(backgroundHex) > 0.55 ? '#171717' : '#ffffff';
 }
 function titleCase(str) {
-    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
 }
-function generateDefaultColors() {
-    const colors = [];
-    const styles = ['primary', 'secondary', 'success', 'warning', 'danger'];
-    const variants = [
-        'lightest',
-        'lighter',
-        'light',
-        'surface',
-        'dark',
-        'darker',
-        'darkest',
-        // ,'default'
-    ];
-    for (const style of styles) {
-        for (const variant of variants) {
-            let name;
-            let colorClass;
-            // if (variant === 'default') {
-            //   name = `${style}-${variant}`;
-            //   colorClass = `ax-text-${style}-${variant}`;
-            // } else {
-            name = `${style}-${variant}`;
-            colorClass = `ax-text-${style}-on-${variant}`;
-            // }
-            colors.push({
-                title: titleCase(variant === 'surface' ? style : titleCase(name)),
-                name: name,
-                color: colorClass,
-                background: `ax-bg-${name}`,
-                border: `ax-border-${name}`,
-            });
+//#endregion
+//#region ---- Surface variants (palette-synchronized) ----
+/**
+ * Seven tonal steps per semantic color. Backgrounds are mixed in RGB using the **same palette’s**
+ * canvas `light` and `dark` as poles so swatches stay aligned with `AXPThemePaletteProvider` data.
+ */
+const SURFACE_VARIANTS = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+function tonalBackgroundHex(base, variant, canvas) {
+    switch (variant) {
+        case 'lightest':
+            return mixHex(base, canvas.light, 0.85);
+        case 'lighter':
+            return mixHex(base, canvas.light, 0.62);
+        case 'light':
+            return mixHex(base, canvas.light, 0.38);
+        case 'surface':
+            return base;
+        case 'dark':
+            return mixHex(base, canvas.dark, 0.35);
+        case 'darker':
+            return mixHex(base, canvas.dark, 0.58);
+        case 'darkest':
+            return mixHex(base, canvas.dark, 0.8);
+        default: {
+            const _exhaustive = variant;
+            return _exhaustive;
         }
     }
-    return colors;
 }
-const DEFAULT_COLORS = generateDefaultColors();
-class AXPColorProviderDefault extends AXPColorProvider {
-    async provide() {
-        return DEFAULT_COLORS;
+function styleTitlePrefix(style) {
+    const accentMatch = /^accent(\d+)$/.exec(style);
+    if (accentMatch) {
+        return `Accent ${accentMatch[1]}`;
+    }
+    return titleCase(style);
+}
+function surfaceVariantTitle(style, variant) {
+    if (variant === 'surface') {
+        return styleTitlePrefix(style);
     }
+    return `${styleTitlePrefix(style)} ${titleCase(variant)}`;
 }
-const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
+function pushVariantScale(entries, styleKey, baseHex, canvas) {
+    for (const variant of SURFACE_VARIANTS) {
+        const background = tonalBackgroundHex(baseHex, variant, canvas);
+        const color = contrastForeground(background);
+        const name = `${styleKey}-${variant}`;
+        entries.push({
+            title: surfaceVariantTitle(styleKey, variant),
+            name,
+            color,
+            background,
+            border: background,
+        });
+    }
+}
+function pushFlatSwatch(entries, title, name, hex) {
+    const color = contrastForeground(hex);
+    entries.push({ title, name, color, background: hex, border: hex });
+}
+/**
+ * Builds the full chooser list from a single `AXPThemePalette` (colors object only).
+ */
+function buildColorsFromThemePalette(palette) {
+    const colors = palette.colors;
+    const canvas = { light: colors.light, dark: colors.dark };
+    const entries = [];
+    const core = ['primary', 'secondary', 'success', 'warning', 'danger'];
+    for (const key of core) {
+        pushVariantScale(entries, key, colors[key], canvas);
+    }
+    const neutral = colors.neutral;
+    if (neutral) {
+        pushVariantScale(entries, 'neutral', neutral, canvas);
+    }
+    colors.accents.forEach((hex, index) => {
+        pushVariantScale(entries, `accent${index + 1}`, hex, canvas);
+    });
+    pushFlatSwatch(entries, 'Canvas Light', 'canvas-light', colors.light);
+    pushFlatSwatch(entries, 'Canvas Dark', 'canvas-dark', colors.dark);
+    return entries;
+}
+//#endregion
+//#region ---- Service ----
 class AXPColorChooserService {
     constructor() {
-        this.defaultProvider = new AXPColorProviderDefault();
-        this.providers = (() => {
-            const injected = inject(AXP_COLOR_PROVIDER, { optional: true });
-            if (!injected) {
-                return [this.defaultProvider];
-            }
-            const providers = Array.isArray(injected) ? injected : [injected];
-            return [...providers, this.defaultProvider];
-        })();
+        this.themeStore = inject(AXPLayoutThemeService);
+        this.palettePromise = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.cacheKey = null;
         this.cache = null;
     }
     async getColors() {
-        if (this.cache) {
+        const paletteName = this.themeStore.currentPalette();
+        if (this.cache && this.cacheKey === paletteName) {
             return this.cache;
         }
-        const allColors = [];
-        for (const resolver of this.providers) {
-            const result = await resolver.provide();
-            allColors.push(...result);
-        }
-        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
-        this.cache = uniqueColors;
-        return uniqueColors;
+        const provider = await this.palettePromise;
+        const list = await provider.getList();
+        const palette = list.find((p) => p.name === paletteName) ?? list.find((p) => p.name === 'default') ?? list[0] ?? null;
+        const colors = palette ? buildColorsFromThemePalette(palette) : [];
+        this.cacheKey = paletteName;
+        this.cache = colors;
+        return colors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
@@ -1744,18 +1819,17 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
             const value = this.getValue();
+            const fallbackName = () => this.colors()[0]?.name;
             if (!value) {
-                return this.colors()[0];
+                return fallbackName();
             }
-            // 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];
+                return fallbackName();
             }
-            // Otherwise value is an object
             return value.name;
         }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
@@ -1776,6 +1850,9 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
             this.setValue(stringValue);
         }
     }
+    isHexSwatch(color) {
+        return color.background.startsWith('#');
+    }
     parseStringValue(value) {
         const parts = value.trim().split(/\s+/);
         if (parts.length !== 3) {
@@ -1786,7 +1863,7 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         return match?.name ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
       <ax-form [messageStyle]="'float'" [updateOn]="'change'">
         <ax-form-field>
           <ax-select-box
@@ -1801,12 +1878,23 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
           >
             <ng-template #customItemTemplate let-item>
               <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
+                @if (isHexSwatch(item.data)) {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-solid"
+                    [style.background-color]="item.data.background"
+                    [style.border-color]="item.data.border"
+                    [style.color]="item.data.color"
+                  >
+                    <span>Aa</span>
+                  </div>
+                } @else {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                    [class]="item.data.background"
+                  >
+                    <span [class]="item.data.color">Aa</span>
+                  </div>
+                }
                 <span>{{ item.data.title }}</span>
               </div>
             </ng-template>
@@ -1815,7 +1903,7 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
           </ax-select-box>
         </ax-form-field>
       </ax-form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
             type: Component,
@@ -1836,12 +1924,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           >
             <ng-template #customItemTemplate let-item>
               <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
+                @if (isHexSwatch(item.data)) {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-solid"
+                    [style.background-color]="item.data.background"
+                    [style.border-color]="item.data.border"
+                    [style.color]="item.data.color"
+                  >
+                    <span>Aa</span>
+                  </div>
+                } @else {
+                  <div
+                    class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                    [class]="item.data.background"
+                  >
+                    <span [class]="item.data.color">Aa</span>
+                  </div>
+                }
                 <span>{{ item.data.title }}</span>
               </div>
             </ng-template>
@@ -1864,7 +1963,7 @@ var themeColorChooserEdit_component = /*#__PURE__*/Object.freeze({
 const AXPThemeColorChooserWidgetConfig = {
     name: 'theme-color-chooser',
     title: 'Theme Color Chooser',
-    icon: 'fa-solid fa-palette',
+    icon: 'fa-light fa-palette',
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
@@ -1873,10 +1972,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-CHfrTtol.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-D566Kdvy.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
         },
         view: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-BSmvnUVq.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-D7-rCGl7.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
         },
     },
 };
@@ -1934,7 +2033,7 @@ var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
 const AXPThemeModeChooserWidget = {
     name: "theme-mode-chooser",
     title: "Theme Mode Chooser",
-    icon: "fa-solid fa-square",
+    icon: "fa-light fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -2010,7 +2109,7 @@ var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
 const AXPThemePaletteChooserWidget = {
     name: "theme-palette-chooser",
     title: "Theme Palette Chooser",
-    icon: "fa-solid fa-square",
+    icon: "fa-light fa-square",
     type: 'editor',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     properties: [
@@ -2067,7 +2166,7 @@ class AXPThemesSharedModule {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-themes-shared-settings.provider-D13QB3Hr.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -2107,7 +2206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useFactory: async () => {
                                 const injector = inject(Injector);
-                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-themes-shared-settings.provider-D13QB3Hr.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,