@acorex/platform 20.2.0-next.1 → 20.2.0-next.2

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

@@ -639,18 +639,29 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.colorService = inject(AXPColorChooserService);
         this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : []));
+        this.selectedColor = computed(() => {
+            const color = this.getValue();
+            if (typeof color === 'string') {
+                return color;
+            }
+            return color?.name;
+        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
     }
     async ngOnInit() {
+        const allColors = await this.colorService.getColors();
+        this.colors.set(allColors);
         super.ngOnInit();
-        this.colors.set(await this.colorService.getColors());
     }
-    handleValueChange(name) {
-        if (!name) {
-            this.setValue(undefined);
-            return;
+    handleValueChange(event) {
+        if (event.isUserInteraction) {
+            if (!event.value) {
+                this.setValue(undefined);
+                return;
+            }
+            // const color = this.colors().find((c) => c.name === event.value);
+            const color = event.component.selectedItems[0];
+            this.setValue(color);
         }
-        const color = this.colors().find((c) => c.name === name);
-        this.setValue(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
@@ -663,8 +674,9 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
             valueField="name"
             [placeholder]="options()?.placeholder || 'Select a color...'"
             [itemTemplate]="customItemTemplate"
-            [ngModel]="getValue()?.name"
-            (ngModelChange)="handleValueChange($event)"
+            [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">
@@ -699,8 +711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             valueField="name"
             [placeholder]="options()?.placeholder || 'Select a color...'"
             [itemTemplate]="customItemTemplate"
-            [ngModel]="getValue()?.name"
-            (ngModelChange)="handleValueChange($event)"
+            [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">