@acorex-platform/framework-client 0.0.32 → 0.0.33

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

@@ -30,10 +30,9 @@ import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2$3 from '@acorex/components/form';
+import * as i1$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';
+import { AXLookupComponent } from '@acorex/components/lookup';
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
@@ -2469,6 +2468,8 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         this.colorService = inject(AXPColorChooserService);
         this.colors = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        this.lastSelectedColor = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastSelectedColor" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'] ?? '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
@@ -2493,14 +2494,20 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         this.colors.set(allColors);
         super.ngOnInit();
     }
+    handleSelectionChanged(event) {
+        const item = (event.items ?? [])[0];
+        this.lastSelectedColor.set(item);
+    }
     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 color = this.lastSelectedColor() ?? this.colors().find((entry) => entry.name === event.value);
+            if (!color) {
+                return;
+            }
             const stringValue = `${color.color} ${color.background} ${color.border}`;
             this.setValue(stringValue);
         }
@@ -2530,43 +2537,45 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", host: { classAttribute: "block flex-1 w-full" }, usesInheritance: true, ngImport: i0, template: `
         <ax-form-field>
-          <ax-select-box
+          <ax-lookup
+            mode="drop-down-list"
             [dataSource]="colors()"
             textField="title"
             valueField="name"
+            [searchable]="true"
             [placeholder]="placeholder()"
             [itemTemplate]="customItemTemplate"
             [ngModel]="selectedColor()"
             (onValueChanged)="handleValueChange($event)"
+            (onSelectionChanged)="handleSelectionChanged($event)"
             [selectedTemplate]="customItemTemplate"
           >
             <ng-template #customItemTemplate let-item>
               <div class="flex items-center gap-2 p-2">
-                @if (isHexSwatch(item.data)) {
+                @if (isHexSwatch(item)) {
                   <div
                     class="w-6 h-6 rounded flex items-center justify-center border border-solid"
-                    [style.background-color]="item.data.background"
-                    [style.border-color]="item.data.border"
-                    [style.color]="item.data.color"
+                    [style.background-color]="item.background"
+                    [style.border-color]="item.border"
+                    [style.color]="item.color"
                   >
                     <span>Aa</span>
                   </div>
                 } @else {
                   <div
                     class="w-6 h-6 rounded flex items-center justify-center border border-dashed border-black dark:border-white"
-                    [class]="item.data.background"
+                    [class]="item.background"
                   >
-                    <span [class]="item.data.color">Aa</span>
+                    <span [class]="item.color">Aa</span>
                   </div>
                 }
-                <span>{{ item.data.title }}</span>
+                <span>{{ item.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-lookup>
         </ax-form-field>
-  `, 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$3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "directive", type: i2$3.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 }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i1$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "directive", type: i1$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { 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: "22.0.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
             type: Component,
@@ -2574,47 +2583,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-color-chooser-widget',
                     template: `
         <ax-form-field>
-          <ax-select-box
+          <ax-lookup
+            mode="drop-down-list"
             [dataSource]="colors()"
             textField="title"
             valueField="name"
+            [searchable]="true"
             [placeholder]="placeholder()"
             [itemTemplate]="customItemTemplate"
             [ngModel]="selectedColor()"
             (onValueChanged)="handleValueChange($event)"
+            (onSelectionChanged)="handleSelectionChanged($event)"
             [selectedTemplate]="customItemTemplate"
           >
             <ng-template #customItemTemplate let-item>
               <div class="flex items-center gap-2 p-2">
-                @if (isHexSwatch(item.data)) {
+                @if (isHexSwatch(item)) {
                   <div
                     class="w-6 h-6 rounded flex items-center justify-center border border-solid"
-                    [style.background-color]="item.data.background"
-                    [style.border-color]="item.data.border"
-                    [style.color]="item.data.color"
+                    [style.background-color]="item.background"
+                    [style.border-color]="item.border"
+                    [style.color]="item.color"
                   >
                     <span>Aa</span>
                   </div>
                 } @else {
                   <div
                     class="w-6 h-6 rounded flex items-center justify-center border border-dashed border-black dark:border-white"
-                    [class]="item.data.background"
+                    [class]="item.background"
                   >
-                    <span [class]="item.data.color">Aa</span>
+                    <span [class]="item.color">Aa</span>
                   </div>
                 }
-                <span>{{ item.data.title }}</span>
+                <span>{{ item.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-lookup>
         </ax-form-field>
   `,
                     host: {
                         class: 'block flex-1 w-full',
                     },
-                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
+                    imports: [AXLookupComponent, AXFormModule, CommonModule, FormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });