@acorex/platform 20.7.13 → 20.7.15

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

@@ -7,33 +7,31 @@ 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, Injectable, signal, ChangeDetectionStrategy, effect, Input, Injector, NgModule } from '@angular/core';
+import { computed, inject, Component, InjectionToken, signal, effect, ChangeDetectionStrategy, Injectable, Input, Injector, NgModule } from '@angular/core';
 import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import * as i1$2 from '@acorex/platform/core';
-import { AXPScreenSize, AXPPlatformScope } from '@acorex/platform/core';
+import * as i1$3 from '@acorex/platform/core';
+import { AXPScreenSize, AXPPlatformScope, AXPComponentSlotModule } from '@acorex/platform/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i3$1 from '@acorex/platform/layout/widget-core';
+import * as i2$3 from '@acorex/platform/layout/widget-core';
 import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import * as i2$3 from '@acorex/platform/layout/components';
-import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
-import * as i2$1 from '@acorex/components/form';
-import { AXFormModule } from '@acorex/components/form';
-import * as i4$1 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i1$1 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
+import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import * as i5$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/layout/widgets';
-import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i2$2 from '@acorex/components/button-group';
+import * as i2$1 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXBasePageComponent } from '@acorex/components/page';
+import * as i1$1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i2$2 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import * as i1$2 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
@@ -467,234 +465,6 @@ class AXPThemePaletteProviderDefault {
     }
 }
 
-class AXPColorProvider {
-}
-function titleCase(str) {
-    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-}
-function generateDefaultColors() {
-    const colors = [];
-    const styles = ['primary', 'secondary', 'success', 'warning', 'danger'];
-    const variants = [
-        'lightest',
-        'lighter',
-        'light',
-        'surface',
-        'dark',
-        'darker',
-        'darkest',
-        // ,'default'
-    ];
-    for (const style of styles) {
-        for (const variant of variants) {
-            let name;
-            let colorClass;
-            // if (variant === 'default') {
-            //   name = `${style}-${variant}`;
-            //   colorClass = `ax-text-${style}-${variant}`;
-            // } else {
-            name = `${style}-${variant}`;
-            colorClass = `ax-text-${style}-on-${variant}`;
-            // }
-            colors.push({
-                title: titleCase(variant === 'surface' ? style : titleCase(name)),
-                name: name,
-                color: colorClass,
-                background: `ax-bg-${name}`,
-                border: `ax-border-${name}`,
-            });
-        }
-    }
-    return colors;
-}
-const DEFAULT_COLORS = generateDefaultColors();
-class AXPColorProviderDefault extends AXPColorProvider {
-    async provide() {
-        return DEFAULT_COLORS;
-    }
-}
-const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
-class AXPColorChooserService {
-    constructor() {
-        this.defaultProvider = new AXPColorProviderDefault();
-        this.providers = (() => {
-            const injected = inject(AXP_COLOR_PROVIDER, { optional: true });
-            if (!injected) {
-                return [this.defaultProvider];
-            }
-            const providers = Array.isArray(injected) ? injected : [injected];
-            return [...providers, this.defaultProvider];
-        })();
-        this.cache = null;
-    }
-    async getColors() {
-        if (this.cache) {
-            return this.cache;
-        }
-        const allColors = [];
-        for (const resolver of this.providers) {
-            const result = await resolver.provide();
-            allColors.push(...result);
-        }
-        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
-        this.cache = uniqueColors;
-        return uniqueColors;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.colorService = inject(AXPColorChooserService);
-        this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
-        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.selectedColor = computed(() => {
-            const value = this.getValue();
-            if (!value) {
-                return this.colors()[0];
-            }
-            // If value is a string in the format: "ax-text-* ax-bg-* ax-border-*"
-            if (typeof value === 'string') {
-                const parsed = this.parseStringValue(value);
-                if (parsed) {
-                    return parsed;
-                }
-                return this.colors()[0];
-            }
-            // Otherwise value is an object
-            return value.name;
-        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
-    }
-    async ngOnInit() {
-        const allColors = await this.colorService.getColors();
-        this.colors.set(allColors);
-        super.ngOnInit();
-    }
-    handleValueChange(event) {
-        if (event.isUserInteraction) {
-            if (!event.value) {
-                this.setValue(undefined);
-                return;
-            }
-            const color = event.component.selectedItems[0];
-            // Always store as ordered string: "color background border"
-            const stringValue = `${color.color} ${color.background} ${color.border}`;
-            this.setValue(stringValue);
-        }
-    }
-    parseStringValue(value) {
-        const parts = value.trim().split(/\s+/);
-        if (parts.length !== 3) {
-            return null;
-        }
-        const [color, background, border] = parts;
-        const match = this.colors().find((c) => c.color === color && c.background === background && c.border === border);
-        return match?.name ?? null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
-      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
-        <ax-form-field>
-          <ax-select-box
-            [dataSource]="colors()"
-            textField="title"
-            valueField="name"
-            [placeholder]="placeholder()"
-            [itemTemplate]="customItemTemplate"
-            [ngModel]="selectedColor()"
-            (onValueChanged)="handleValueChange($event)"
-            [selectedTemplate]="customItemTemplate"
-          >
-            <ng-template #customItemTemplate let-item>
-              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
-                <span>{{ item.data.title }}</span>
-              </div>
-            </ng-template>
-            <ax-search-box look="fill"></ax-search-box>
-            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
-          </ax-select-box>
-        </ax-form-field>
-      </ax-form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$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", "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$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$1.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$1.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", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-color-chooser-widget',
-                    template: `
-      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
-        <ax-form-field>
-          <ax-select-box
-            [dataSource]="colors()"
-            textField="title"
-            valueField="name"
-            [placeholder]="placeholder()"
-            [itemTemplate]="customItemTemplate"
-            [ngModel]="selectedColor()"
-            (onValueChanged)="handleValueChange($event)"
-            [selectedTemplate]="customItemTemplate"
-          >
-            <ng-template #customItemTemplate let-item>
-              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
-                <div
-                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
-                  [ngClass]="item.data.background"
-                >
-                  <span [ngClass]="item.data.color">Aa</span>
-                </div>
-                <span>{{ item.data.title }}</span>
-              </div>
-            </ng-template>
-            <ax-search-box look="fill"></ax-search-box>
-            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
-          </ax-select-box>
-        </ax-form-field>
-      </ax-form>
-  `,
-                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-var themeColorChooserEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPColorChooserWidgetEditComponent: AXPColorChooserWidgetEditComponent
-});
-
-const AXPThemeColorChooserWidgetConfig = {
-    name: 'theme-color-chooser',
-    title: 'Theme Color Chooser',
-    icon: 'fa-solid fa-palette',
-    type: 'editor',
-    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
-        },
-        column: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-BQxoUmYL.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
-        },
-        view: {
-            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-CTGy2kjJ.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
-        },
-    },
-};
-
 class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -1053,7 +823,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
         </div>
       </div>
     </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", "autoSearch"], 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", "fitParent", "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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
@@ -1883,6 +1653,234 @@ const AXPMenuOrientationChooserWidget = {
     }
 };
 
+class AXPColorProvider {
+}
+function titleCase(str) {
+    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+}
+function generateDefaultColors() {
+    const colors = [];
+    const styles = ['primary', 'secondary', 'success', 'warning', 'danger'];
+    const variants = [
+        'lightest',
+        'lighter',
+        'light',
+        'surface',
+        'dark',
+        'darker',
+        'darkest',
+        // ,'default'
+    ];
+    for (const style of styles) {
+        for (const variant of variants) {
+            let name;
+            let colorClass;
+            // if (variant === 'default') {
+            //   name = `${style}-${variant}`;
+            //   colorClass = `ax-text-${style}-${variant}`;
+            // } else {
+            name = `${style}-${variant}`;
+            colorClass = `ax-text-${style}-on-${variant}`;
+            // }
+            colors.push({
+                title: titleCase(variant === 'surface' ? style : titleCase(name)),
+                name: name,
+                color: colorClass,
+                background: `ax-bg-${name}`,
+                border: `ax-border-${name}`,
+            });
+        }
+    }
+    return colors;
+}
+const DEFAULT_COLORS = generateDefaultColors();
+class AXPColorProviderDefault extends AXPColorProvider {
+    async provide() {
+        return DEFAULT_COLORS;
+    }
+}
+const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
+class AXPColorChooserService {
+    constructor() {
+        this.defaultProvider = new AXPColorProviderDefault();
+        this.providers = (() => {
+            const injected = inject(AXP_COLOR_PROVIDER, { optional: true });
+            if (!injected) {
+                return [this.defaultProvider];
+            }
+            const providers = Array.isArray(injected) ? injected : [injected];
+            return [...providers, this.defaultProvider];
+        })();
+        this.cache = null;
+    }
+    async getColors() {
+        if (this.cache) {
+            return this.cache;
+        }
+        const allColors = [];
+        for (const resolver of this.providers) {
+            const result = await resolver.provide();
+            allColors.push(...result);
+        }
+        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
+        this.cache = uniqueColors;
+        return uniqueColors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colorService = inject(AXPColorChooserService);
+        this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
+        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.selectedColor = computed(() => {
+            const value = this.getValue();
+            if (!value) {
+                return this.colors()[0];
+            }
+            // If value is a string in the format: "ax-text-* ax-bg-* ax-border-*"
+            if (typeof value === 'string') {
+                const parsed = this.parseStringValue(value);
+                if (parsed) {
+                    return parsed;
+                }
+                return this.colors()[0];
+            }
+            // Otherwise value is an object
+            return value.name;
+        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+    }
+    async ngOnInit() {
+        const allColors = await this.colorService.getColors();
+        this.colors.set(allColors);
+        super.ngOnInit();
+    }
+    handleValueChange(event) {
+        if (event.isUserInteraction) {
+            if (!event.value) {
+                this.setValue(undefined);
+                return;
+            }
+            const color = event.component.selectedItems[0];
+            // Always store as ordered string: "color background border"
+            const stringValue = `${color.color} ${color.background} ${color.border}`;
+            this.setValue(stringValue);
+        }
+    }
+    parseStringValue(value) {
+        const parts = value.trim().split(/\s+/);
+        if (parts.length !== 3) {
+            return null;
+        }
+        const [color, background, border] = parts;
+        const match = this.colors().find((c) => c.color === color && c.background === background && c.border === border);
+        return match?.name ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="placeholder()"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="selectedColor()"
+            (onValueChanged)="handleValueChange($event)"
+            [selectedTemplate]="customItemTemplate"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                <div
+                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                  [ngClass]="item.data.background"
+                >
+                  <span [ngClass]="item.data.color">Aa</span>
+                </div>
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-chooser-widget',
+                    template: `
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="placeholder()"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="selectedColor()"
+            (onValueChanged)="handleValueChange($event)"
+            [selectedTemplate]="customItemTemplate"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                <div
+                  class="ax-w-6 ax-h-6 ax-rounded ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                  [ngClass]="item.data.background"
+                >
+                  <span [ngClass]="item.data.color">Aa</span>
+                </div>
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+  `,
+                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var themeColorChooserEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPColorChooserWidgetEditComponent: AXPColorChooserWidgetEditComponent
+});
+
+const AXPThemeColorChooserWidgetConfig = {
+    name: 'theme-color-chooser',
+    title: 'Theme Color Chooser',
+    icon: 'fa-solid fa-palette',
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
+        },
+        column: {
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-column.component-BQxoUmYL.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+        },
+        view: {
+            component: () => import('./acorex-platform-themes-shared-theme-color-chooser-view.component-CTGy2kjJ.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+        },
+    },
+};
+
 class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -2039,8 +2037,8 @@ class AXPThemesSharedModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.3.16", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$3.AXPComponentSlotModule, i3$1.AXPWidgetCoreModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$3.AXPComponentSlotModule, i2$3.AXPWidgetCoreModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
@@ -2113,7 +2111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ...provideDefaultIconChooser(),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$3.AXPAppStartUpService }, { type: i0.Injector }] });
 
 /**
  * Generated bundle index. Do not edit.