@acorex/platform 18.1.6 → 18.2.1

package/fesm2022/acorex-platform-widgets.mjs

@@ -7,12 +7,12 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$7 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } from '@acorex/platform/layout/builder';
 import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, ElementRef, signal, afterNextRender, ViewEncapsulation, ViewChild, ChangeDetectorRef, effect, InjectionToken, Injectable, HostListener, NgModule } from '@angular/core';
-import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/components/common';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, ChangeDetectorRef, InjectionToken, Injectable, HostListener, NgModule } from '@angular/core';
+import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i1$1 from '@angular/forms';
@@ -48,12 +48,12 @@ import * as i1$5 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i2$2 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
+import { first, Subscription } from 'rxjs';
 import * as i2$3 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i5$1 from '@acorex/components/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import { Subscription } from 'rxjs';
 import * as i2$4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
@@ -179,7 +179,7 @@ const AXP_THEME_PROPERTY = {
     group: AXP_STYLING_PROPERTY_GROUP,
     schema: {
         dataType: 'string',
-        defaultValue: { id: 'default' },
+        defaultValue: { id: 'default', title: 'Default' },
         interface: {
             name: 'theme',
             path: 'options.theme',
@@ -421,12 +421,14 @@ const AXP_VALUE_FIELD_PROPERTY = createStringProperty({
     title: 'Value Field',
     path: 'options.valueField',
     group: AXP_DATA_PROPERTY_GROUP,
+    defaultValue: "id",
 });
 const AXP_TEXT_FIELD_PROPERTY = createStringProperty({
     name: 'textField',
     title: 'Text Field',
     path: 'options.textField',
     group: AXP_DATA_PROPERTY_GROUP,
+    defaultValue: "title",
 });
 const AXP_DESCRIPTION_PROPERTY = createStringProperty({
     name: 'description',
@@ -458,7 +460,7 @@ const AXP_DATE_FORMAT_PROPERTY = createSelectProperty({
         { id: 'datetime', title: 'DateTime' },
         { id: 'time', title: 'Time' },
     ],
-    defaultValue: { id: 'date', title: 'date' },
+    defaultValue: 'date',
     path: 'options.format',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
 });
@@ -1550,22 +1552,36 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.formatter = inject(AXDateTimeFormatter);
+        this.translationService = inject(AXTranslationService);
         this.multiple = computed(() => this.options()['multiple']);
-        this.format = computed(() => this.options()['format']['id']);
+        this.format = computed(() => {
+            const rawValue = this.options()['format'];
+            if (typeof rawValue == 'string')
+                return rawValue;
+            else if (rawValue && typeof rawValue == 'object')
+                return rawValue['id'];
+            else
+                return 'date';
+        });
         this.internalValue = computed(() => Array.isArray(this.getValue())
             ? this.getValue().map((v) => this.handleFormat(v))
             : [this.handleFormat(this.getValue())]);
     }
     handleFormat(value) {
-        return value ? this.formatter.format(new Date(value), { format: this.format() }) : '---';
+        return value
+            ? this.formatter.format(new Date(value), {
+                format: this.format(),
+                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            })
+            : '---';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div>
       @if(multiple()){ @for (item of internalValue(); track $index) {
-      <p>{{ item }}</p>
+      <span dir="ltr">{{ item }}</span>
       } } @else {
-      <p>{{ internalValue()[0] }}</p>
+      <span dir="ltr">{{ internalValue()[0] }}</span>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1576,9 +1592,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     template: `
     <div>
       @if(multiple()){ @for (item of internalValue(); track $index) {
-      <p>{{ item }}</p>
+      <span dir="ltr">{{ item }}</span>
       } } @else {
-      <p>{{ internalValue()[0] }}</p>
+      <span dir="ltr">{{ internalValue()[0] }}</span>
       }
     </div>
   `,
@@ -1600,7 +1616,15 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
         this.validationService = inject(AXValidationService);
         this.multiple = computed(() => this.options()['multiple']);
         this.clearButton = computed(() => this.options()['clearButton']);
-        this.format = computed(() => this.options()['format']?.['id']);
+        this.format = computed(() => {
+            const rawValue = this.options()['format'];
+            if (typeof rawValue == 'string')
+                return rawValue;
+            else if (rawValue && typeof rawValue == 'object')
+                return rawValue['id'];
+            else
+                return 'date';
+        });
         this.disabled = computed(() => this.options()['disabled']);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
@@ -1770,13 +1794,20 @@ var dateTimeBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 
 class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
-        super();
+        super(...arguments);
         this.formatter = inject(AXDateTimeFormatter);
-        this.elementRef = inject(ElementRef);
+        this.translationService = inject(AXTranslationService);
         this.convertedValue = computed(() => this.updateValue());
         this.multiple = this.options['multiple'] || false;
-        this.format = this.options['format'] || 'date';
-        this.dir = signal('ltr');
+        this.format = computed(() => {
+            const rawValue = this.options['format'];
+            if (typeof rawValue == 'string')
+                return rawValue;
+            else if (rawValue && typeof rawValue == 'object')
+                return rawValue['id'];
+            else
+                return 'date';
+        });
         this.updateValue = () => {
             const rawValue = this.rawValue;
             if (rawValue == null) {
@@ -1789,33 +1820,36 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
                 return this.handleFormat(rawValue);
             }
         };
-        afterNextRender(() => {
-            this.dir.set(getComputedStyle(this.elementRef.nativeElement).direction);
-        });
     }
     handleFormat(value) {
-        return value ? this.formatter.format(new Date(value), { format: this.format }) : '---';
+        console.log(this.translationService);
+        return value
+            ? this.formatter.format(new Date(value), {
+                format: this.format(),
+                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            })
+            : '---';
     }
     isArray(val) {
         return Array.isArray(val);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex" [class]="dir() === 'rtl' ? 'ax-justify-end' : 'ax-justify-start'">
-    <span [title]="convertedValue()">{{ convertedValue() }}</span>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex">
+    <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<div class="ax-flex" [class]="dir() === 'rtl' ? 'ax-justify-end' : 'ax-justify-start'">
-    <span [title]="convertedValue()">{{ convertedValue() }}</span>
+                    template: `<div class="ax-flex">
+    <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
                     inputs: ['rawValue'],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 var dateTimeBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4274,24 +4308,18 @@ var richTextWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.placeholder = computed(() => this.options()['placeholder'] ?? 'default');
-        this.eff = computed(() => {
+        this.placeholder = computed(() => this.options()['placeholder']);
+        this.disabled = computed(() => this.options()["disabled"]);
+        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
+        this.eff = effect(() => {
             console.log(this.getValue());
-            window.a = this;
         });
-        this._validationRules = [];
     }
     setWysiwyg(e) {
         if (e) {
             this.setValue(e.value);
         }
     }
-    get validationRules() {
-        return this._validationRules;
-    }
-    set validationRules(v) {
-        this._validationRules = v;
-    }
     get __class() {
         const cls = {};
         cls[`ax-block`] = true;
@@ -4313,7 +4341,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
     </ax-wysiwyg-toolbar>
-    @for (validation of validationRules; track $index) {
+    @for (validation of validationRules(); track $index) {
     <ax-validation-rule
       [rule]="validation.rule"
       [message]="validation.options?.message"
@@ -4340,7 +4368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
     </ax-wysiwyg-toolbar>
-    @for (validation of validationRules; track $index) {
+    @for (validation of validationRules(); track $index) {
     <ax-validation-rule
       [rule]="validation.rule"
       [message]="validation.options?.message"
@@ -4352,7 +4380,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXWysiwygModule, AXValidationModule, AXFormModule, FormsModule],
-                    inputs: [],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -4484,98 +4511,71 @@ const AXPRichTextWidget = {
     },
 };
 
-class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
+class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => Array.isArray(this.getValue())
-            ? this.getValue().map((item) => this.extractItem(item))
-            : [this.extractItem(this.getValue())]);
-        this.text = null;
-        this.multiple = computed(() => this.options()['multiple']);
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        this.multiple = this.options['multiple'];
+        this.valueField = this.options['valueField'] ?? 'id';
+        this.textField = this.options['textField'] ?? 'title';
+        this.internalValue = computed(() => Array.isArray(this.rawValue)
+            ? this.rawValue.map((item) => this.extractItem(item))
+            : [this.extractItem(this.rawValue)]);
     }
     extractItem(item) {
         return typeof item == 'object'
             ? {
-                id: item[this.valueField()],
-                text: item[this.textField()],
+                [this.valueField]: item[this.valueField],
+                [this.textField]: item[this.textField],
             }
             : {
-                id: item,
-                text: item,
+                [this.valueField]: item,
+                [this.textField]: item,
             };
     }
-    get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
-        return cls;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    <div>
-      @if(multiple()) { @for (item of internalValue(); track $index) {
-      <p>{{ item.text }}</p>
-      } }@else {
-      <p>{{ internalValue()[0].text }}</p>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `
-    <div>
-      @if(multiple()) { @for (item of internalValue(); track $index) {
-      <p>{{ item.text }}</p>
-      } }@else {
-      <p>{{ internalValue()[0].text }}</p>
-      }
-    </div>
-  `,
+                    template: ` <div class="ax-flex ax-gap-2">
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+    }
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: [],
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: ['rawValue'],
                 }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
-var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
+var selectBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPSelectBoxWidgetViewComponent: AXPSelectBoxWidgetViewComponent
+  AXPSelectBoxWidgetColumnComponent: AXPSelectBoxWidgetColumnComponent
 });
 
-class AXPSelectBoxWidgetEditComponent extends AXPWidgetComponent {
+class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     constructor() {
         super(...arguments);
         this.multiple = computed(() => this.options()['multiple']);
         this.validationRules = computed(() => this.options()['validationRules'] ?? []);
-        this.dataSource = computed(() => {
-            const rawValue = this.options()['dataSource'];
-            if (rawValue instanceof AXDataSource) {
-                return rawValue;
-            }
-            else if (Array.isArray(rawValue)) {
-                return convertArrayToDataSource(rawValue);
-            }
-            else {
-                return convertArrayToDataSource([]);
-            }
-        });
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.textField = computed(() => this.options()['textField'] ?? 'title');
         this.disabled = computed(() => this.options()['disabled']);
         this.placeholder = computed(() => this.options()['placeholder'] ?? '');
         this.hasClearButton = computed(() => this.options()['hasClearButton']);
     }
     handleValueChange(e) {
         if (e.isUserInteraction) {
-            this.setValue(e.component.selectedItems[0]);
+            if (this.multiple()) {
+                this.setValue(e.component.selectedItems);
+            }
+            else {
+                this.setValue(e.component.selectedItems[0]);
+            }
         }
     }
     refresh() {
@@ -4680,72 +4680,92 @@ var selectBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
   AXPSelectBoxWidgetFilterComponent: AXPSelectBoxWidgetFilterComponent
 });
 
-class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.multiple = this.options['multiple'];
-        this.valueField = this.options['valueField'] ?? 'id';
-        this.textField = this.options['textField'] ?? 'title';
-        this.internalValue = computed(() => Array.isArray(this.rawValue)
-            ? this.rawValue.map((item) => this.extractItem(item))
-            : [this.extractItem(this.rawValue)]);
-    }
-    extractItem(item) {
-        return typeof item == 'object'
-            ? {
-                [this.valueField]: item[this.valueField],
-                [this.textField]: item[this.textField],
-            }
-            : {
-                [this.valueField]: item,
-                [this.textField]: item,
-            };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
-    @for (item of internalValue(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPSelectBoxWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSelectBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` <div class="ax-flex ax-gap-2">
-    @for (item of internalValue(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    }
-  </div>`,
+                    template: ``,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXBadgeModule],
-                    inputs: ['rawValue'],
+                    imports: [CommonModule],
+                    inputs: []
                 }]
         }] });
 
-var selectBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
+var selectBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPSelectBoxWidgetColumnComponent: AXPSelectBoxWidgetColumnComponent
+  AXPSelectBoxWidgetPrintComponent: AXPSelectBoxWidgetPrintComponent
 });
 
-class AXPSelectBoxWidgetPrintComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPSelectBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.internalValue = computed(() => Array.isArray(this.getValue())
+            ? this.getValue().map((item) => this.extractItem(item))
+            : [this.extractItem(this.getValue())]);
+        this.text = null;
+        this.multiple = computed(() => this.options()['multiple']);
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+    }
+    extractItem(item) {
+        const result = typeof item == 'object'
+            ? {
+                id: item[this.valueField()],
+                text: item[this.textField()],
+            }
+            : {
+                id: item,
+                text: item,
+            };
+        debugger;
+        return result;
+    }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <div>
+      @if(multiple()) { @for (item of internalValue(); track $index) {
+      <p>{{ item.text }}</p>
+      } }@else {
+      <p>{{ internalValue()[0].text }}</p>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetPrintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ``,
+                    template: `
+    <div>
+      @if(multiple()) { @for (item of internalValue(); track $index) {
+      <p>{{ item.text }}</p>
+      } }@else {
+      <p>{{ internalValue()[0].text }}</p>
+      }
+    </div>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: [],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-var selectBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
+var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPSelectBoxWidgetPrintComponent: AXPSelectBoxWidgetPrintComponent
+  AXPSelectBoxWidgetViewComponent: AXPSelectBoxWidgetViewComponent
 });
 
 const AXPSelectBoxWidget = {
@@ -4756,6 +4776,7 @@ const AXPSelectBoxWidget = {
     group: AXP_WIDGETS_EDITOR_GROUP,
     type: 'editor',
     properties: [
+        AXP_DATA_SOURCE_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DISABLED_PROPERTY,
@@ -4829,22 +4850,38 @@ var selectionListWidgetView_component = /*#__PURE__*/Object.freeze({
   AXPSelectionListWidgetViewComponent: AXPSelectionListWidgetViewComponent
 });
 
-class AXPSelectionListWidgetDesignerComponent extends AXPWidgetComponent {
+class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent {
     constructor() {
         super(...arguments);
-        this.samples = computed(() => Array.from({ length: 5 }).map((c, i) => {
+        this.multiple = computed(() => this.options()['multiple']);
+        this.direction = computed(() => this.options()['direction']?.id ?? 'horizontal');
+        this.disabled = computed(() => this.options()['disabled']);
+        this.readonly = computed(() => this.options()['readonly']);
+        this.displayItems = signal([]);
+        this.samples = computed(() => Array.from({ length: 3 }).map((c, i) => {
             const item = {};
             item[this.valueField()] = i + 1;
-            item[this.textField()] = `Item ${i + 1}`;
+            item[this.textField()] = `Sample Item ${i + 1}`;
             return item;
         }));
-        this.multiple = computed(() => this.options()['multiple']);
-        this.items = computed(() => this.options()['items'] ?? this.samples());
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.textField = computed(() => this.options()['textField'] ?? 'text');
-        this.direction = computed(() => this.options()['direction']?.id ?? 'horizontal');
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.readonly = computed(() => this.options()["readonly"]);
+        this.ef = effect(() => {
+            this.dataSource()
+                .onChanged.pipe(first())
+                .subscribe((e) => {
+                if (this.items()?.length > 0) {
+                    this.displayItems.set(this.items());
+                }
+                else {
+                    if (e.items?.length > 0) {
+                        this.displayItems.set(e.items);
+                    }
+                    else {
+                        this.displayItems.set(this.samples());
+                    }
+                }
+            });
+            this.dataSource().refresh();
+        });
     }
     get __class() {
         const cls = {};
@@ -4859,7 +4896,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPWidgetComponent {
       [valueField]="valueField()"
       [textField]="textField()"
       [ngModel]="this.getValue()"
-      [items]="items()"
+      [items]="displayItems()"
       [multiple]="multiple()"
       [direction]="direction()"
       [disabled]="disabled()"
@@ -4877,7 +4914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [valueField]="valueField()"
       [textField]="textField()"
       [ngModel]="this.getValue()"
-      [items]="items()"
+      [items]="displayItems()"
       [multiple]="multiple()"
       [direction]="direction()"
       [disabled]="disabled()"
@@ -4900,17 +4937,28 @@ var selectionListWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   AXPSelectionListWidgetDesignerComponent: AXPSelectionListWidgetDesignerComponent
 });
 
-class AXPSelectionListWidgetEditComponent extends AXPWidgetComponent {
+class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
     constructor() {
         super(...arguments);
         this.multiple = computed(() => this.options()['multiple']);
-        this.items = computed(() => this.options()['items']);
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.textField = computed(() => this.options()['textField'] ?? 'text');
         this.direction = computed(() => this.options()['direction']?.id ?? 'horizontal');
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.readonly = computed(() => this.options()["readonly"]);
-        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.readonly = computed(() => this.options()['readonly']);
+        this.displayItems = signal([]);
+        this.ef = effect(() => {
+            this.dataSource()
+                .onChanged.pipe(first())
+                .subscribe((e) => {
+                if (this.items() && this.items.length) {
+                    this.displayItems.set(this.items());
+                }
+                else {
+                    this.displayItems.set(e.items);
+                }
+            });
+            this.dataSource().refresh();
+        });
+        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
     }
     handleValueChange(e) {
         if (e.isUserInteraction) {
@@ -4931,14 +4979,18 @@ class AXPSelectionListWidgetEditComponent extends AXPWidgetComponent {
       [textField]="textField()"
       [ngModel]="this.getValue()"
       (onValueChanged)="handleValueChange($event)"
-      [items]="items()"
+      [items]="displayItems()"
       [multiple]="multiple()"
       [disabled]="disabled()"
       [readonly]="readonly()"
       [direction]="direction()"
     >
       @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
     </ax-selection-list>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "hintField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4953,14 +5005,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       [textField]="textField()"
       [ngModel]="this.getValue()"
       (onValueChanged)="handleValueChange($event)"
-      [items]="items()"
+      [items]="displayItems()"
       [multiple]="multiple()"
       [disabled]="disabled()"
       [readonly]="readonly()"
       [direction]="direction()"
     >
       @for (validation of validationRules(); track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
     </ax-selection-list>
   `,
@@ -5084,6 +5140,8 @@ const AXPSelectionListWidget = {
         AXP_DATA_SOURCE_PROPERTY,
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
+        AXP_VALUE_FIELD_PROPERTY,
+        AXP_TEXT_FIELD_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DIRECTION_PROPERTY,
         AXP_DISABLED_PROPERTY,
@@ -7723,7 +7781,7 @@ class AXPTemplateWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super();
         this.templateProvider = inject(AXPTemplateWidgetProviderService);
-        this.templateId = computed(() => this.options()["templateId"]);
+        this.templateId = computed(() => this.options()['templateId']);
         this.nodeToRender = signal(null);
         //
         effect(async () => {
@@ -7735,15 +7793,8 @@ class AXPTemplateWidgetViewComponent extends AXPWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPTemplateWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPTemplateWidgetViewComponent, isStandalone: true, selector: "axp-template-widget", usesInheritance: true, ngImport: i0, template: `
-    @if(nodeToRender())
-    {
-      <ng-container
-          axp-widget-renderer
-          [node]="nodeToRender()!"
-          [parentNode]="this"
-          [mode]="this.mode"
-      >
-      </ng-container>
+    @if(nodeToRender()) {
+    <ng-container axp-widget-renderer [node]="nodeToRender()!" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -7752,20 +7803,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     selector: 'axp-template-widget',
                     template: `
-    @if(nodeToRender())
-    {
-      <ng-container
-          axp-widget-renderer
-          [node]="nodeToRender()!"
-          [parentNode]="this"
-          [mode]="this.mode"
-      >
-      </ng-container>
+    @if(nodeToRender()) {
+    <ng-container axp-widget-renderer [node]="nodeToRender()!" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
         }], ctorParameters: () => [] });
 
@@ -7860,7 +7904,7 @@ const AXPTemplateWidget = {
             component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
         },
         edit: {
-            component: () => import('./acorex-platform-widgets-template-widget-edit.component-gvAh-gH1.mjs').then((c) => c.AXPTemplateWidgetEditComponent),
+            component: () => import('./acorex-platform-widgets-template-widget-edit.component-BWc0_EA0.mjs').then((c) => c.AXPTemplateWidgetEditComponent),
         },
         print: {
             component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
@@ -7991,18 +8035,37 @@ const AXPQrcodeWidget = {
 };
 
 class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.rgba = computed(() => AXColorUtil.toString(this.getValue(), 'rgba'));
+        this.clipboard = inject(AXPClipBoardService);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "axp-color-box-widget", usesInheritance: true, ngImport: i0, template: `{{ getValue() }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPColorBoxWidgetViewComponent, isStandalone: true, selector: "axp-color-box-widget", usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
+    <span>{{ getValue() }}</span>
+    <i
+      (click)="clipboard.copy('Color', getValue())"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColorBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-color-box-widget',
-                    template: `{{ getValue() }}`,
+                    template: `<div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
+    <span>{{ getValue() }}</span>
+    <i
+      (click)="clipboard.copy('Color', getValue())"
+      class="fa-solid fa-copy ax-text-neutral-400 dark:hover:ax-text-neutral-100 hover:ax-text-neutral-900 group-hover:ax-visible ax-invisible"
+    ></i>
+  </div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
-                    inputs: []
+                    inputs: [],
                 }]
         }] });