@acorex/platform 20.0.12 → 20.0.20

package/fesm2022/acorex-platform-widgets.mjs

@@ -20,7 +20,7 @@ import { AXLabelModule } from '@acorex/components/label';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { AXPClipBoardService, AXPRegionalService, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
+import { AXPClipBoardService, AXPSettingService, AXPRegionalService, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
 import { AXPopupService } from '@acorex/components/popup';
 import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
@@ -31,7 +31,7 @@ import { AXTranslationModule, AXTranslationService } from '@acorex/core/translat
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXBasePageComponent } from '@acorex/components/page';
-import { AXDateTimeFormatter, AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
+import { AXFormatService } from '@acorex/core/format';
 import * as i3$1 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i5 from '@acorex/components/text-area';
@@ -39,7 +39,6 @@ import { AXTextAreaModule } from '@acorex/components/text-area';
 import { set, isNumber, castArray, cloneDeep, isEqual, sum, get } from 'lodash-es';
 import * as i4$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import { AXFormatService } from '@acorex/core/format';
 import * as i1$4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$2 from '@acorex/components/password-box';
@@ -90,6 +89,7 @@ import { AXColorUtil } from '@acorex/core/utils';
 import * as i6$3 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i2$a from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
 import * as i1$c from '@acorex/components/collapse';
@@ -1207,6 +1207,12 @@ class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         this.clipboard = inject(AXPClipBoardService);
+        this.hasValue = computed(() => {
+            if (typeof this.rawValue === 'string')
+                return this.rawValue.trim() !== '';
+            else
+                return this.rawValue?.length > 0;
+        });
         this.itemToValue = (item) => {
             if (typeof item === 'object')
                 return item?.value ?? '';
@@ -1223,24 +1229,34 @@ class AXPContactWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPContactWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPContactWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPContactWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
+  @if(hasValue()){
+  <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
     <span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>
     <i
       (click)="clipboard.copy('Contact', rawValue)"
       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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>
+  } @else {
+  <span class="ax-text-muted">---</span>
+  }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPContactWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
+                    template: `
+  @if(hasValue()){
+  <div class="ax-flex ax-justify-start ax-items-center ax-gap-2 ax-group ax-w-fit">
     <span class="ax-truncate" [title]="getText('line')">{{ getText('comma') }}</span>
     <i
       (click)="clipboard.copy('Contact', rawValue)"
       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>`,
+  </div>
+  } @else {
+  <span class="ax-text-muted">---</span>
+  }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
                     inputs: ['rawValue', 'rowData'],
@@ -1259,7 +1275,7 @@ const DEFAULT_CONTACT_WIDGET_TYPES = [
         name: 'email',
         title: 'Email',
         icon: 'fa-solid fa-envelope',
-        validation: [{ rule: 'required' }, { rule: 'email' }],
+        validation: { rule: 'email' },
         labels: [
             { id: 'work', name: 'Work' },
             { id: 'home', name: 'Home' },
@@ -1270,7 +1286,7 @@ const DEFAULT_CONTACT_WIDGET_TYPES = [
         name: 'phone',
         title: 'Phone',
         icon: 'fa-solid fa-phone',
-        validation: [{ rule: 'required' }],
+        validation: { rule: 'regex', options: { pattern: '^\\+?\\d{3,15}$' }, message: 'Invalid phone number' },
         labels: [
             { id: 'mobile', name: 'Mobile' },
             { id: 'work', name: 'Work' },
@@ -1282,7 +1298,7 @@ const DEFAULT_CONTACT_WIDGET_TYPES = [
         name: 'url',
         title: 'Url',
         icon: 'fa-solid fa-link',
-        validation: [{ rule: 'required' }],
+        validation: { rule: 'regex', options: { pattern: '^https?://(www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)$' }, message: 'Invalid URL' },
         labels: [
             { id: 'website', name: 'Website' },
             { id: 'blog', name: 'Blog' },
@@ -1409,11 +1425,9 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         super();
         this.contactService = inject(AXPContactWidgetService);
         this.popup = inject(AXPopupService);
-        this.validationService = inject(AXValidationService);
-        this.contactType = computed(() => this.options()['name'] || 'email');
+        this.contactType = computed(() => this.options()['type'] || 'email');
         this.activeContactType = signal(undefined);
         this.placeholder = computed(() => this.options()['placeholder'] || this.activeContactType()?.placeholder || `Enter value...`);
-        this.validationRules = computed(() => this.options()['validation'] || this.activeContactType()?.validation || []);
         this.labels = computed(() => this.options()['labels'] || this.activeContactType()?.labels || []);
         this.icon = computed(() => this.options()['icon'] || this.activeContactType()?.icon);
         this.disabled = computed(() => this.options()['disabled']);
@@ -1519,7 +1533,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPContactWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPContactWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max ax-p-4">
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max">
       <ax-text-box
         [ngModel]="valueAsObject().value"
         (onValueChanged)="handleValueChange($event)"
@@ -1539,6 +1553,14 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
             [options]="validation.options"
           ></ax-validation-rule>
         }
+
+        @if(activeContactType()?.validation) {
+        <ax-validation-rule
+          [rule]="activeContactType()?.validation?.rule!"
+          [message]="activeContactType()?.validation?.message!"
+          [options]="activeContactType()?.validation?.options!"
+        ></ax-validation-rule>
+        }
       </ax-text-box>
       @if (hasLabel()) {
         <ax-select-box
@@ -1561,7 +1583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max ax-p-4">
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max">
       <ax-text-box
         [ngModel]="valueAsObject().value"
         (onValueChanged)="handleValueChange($event)"
@@ -1581,6 +1603,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             [options]="validation.options"
           ></ax-validation-rule>
         }
+
+        @if(activeContactType()?.validation) {
+        <ax-validation-rule
+          [rule]="activeContactType()?.validation?.rule!"
+          [message]="activeContactType()?.validation?.message!"
+          [options]="activeContactType()?.validation?.options!"
+        ></ax-validation-rule>
+        }
       </ax-text-box>
       @if (hasLabel()) {
         <ax-select-box
@@ -1624,7 +1654,7 @@ class AXPContactWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super();
         this.contactService = inject(AXPContactWidgetService);
-        this.contactName = computed(() => this.options()['name'] || 'email');
+        this.contactName = computed(() => this.options()['type'] || 'email');
         this.activeContactType = signal(undefined);
         this.icon = computed(() => this.options()['icon'] || this.activeContactType()?.icon);
         this.hasLabel = computed(() => this.options()['hasLabel'] ?? true);
@@ -1672,7 +1702,7 @@ class AXPContactWidgetViewComponent extends AXPValueWidgetComponent {
           : contactName() === 'phone'
             ? 'tel:' + internalValue().value
             : 'mailto:' + internalValue().value;
-      <div class="ax-flex ax-gap-2 ax-items-center ax-p-2">
+      <div class="ax-flex ax-gap-2 ax-items-center">
         <div class="ax-flex ax-gap-2 ax-group ax-items-center ax-justify-center ax-truncate">
           @if (hasIcon()) {
             <ax-icon class="fa-solid ax-text-neutral-400" [class]="activeContactType()?.icon"> </ax-icon>
@@ -1708,7 +1738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
           : contactName() === 'phone'
             ? 'tel:' + internalValue().value
             : 'mailto:' + internalValue().value;
-      <div class="ax-flex ax-gap-2 ax-items-center ax-p-2">
+      <div class="ax-flex ax-gap-2 ax-items-center">
         <div class="ax-flex ax-gap-2 ax-group ax-items-center ax-justify-center ax-truncate">
           @if (hasIcon()) {
             <ax-icon class="fa-solid ax-text-neutral-400" [class]="activeContactType()?.icon"> </ax-icon>
@@ -1804,9 +1834,10 @@ const AXPContactWidget = {
 class AXPDateTimeBoxWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.formatter = inject(AXDateTimeFormatter);
-        this.translationService = inject(AXTranslationService);
+        this.formatter = inject(AXFormatService);
+        this.settingService = inject(AXPSettingService);
         this.multiple = computed(() => this.options()['multiple']);
+        this.convertedValue = signal(null);
         this.format = computed(() => {
             const rawValue = this.options()['format'];
             if (typeof rawValue == 'string')
@@ -1816,28 +1847,47 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPValueWidgetComponent {
             else
                 return 'date';
         });
-        this.internalValue = computed(() => Array.isArray(this.getValue())
-            ? this.getValue().map((v) => this.handleFormat(v))
-            : [this.handleFormat(this.getValue())]);
+        this.#effect = effect(() => {
+            this.updateValue();
+        });
+        this.updateValue = async () => {
+            const rawValue = this.getValue();
+            if (rawValue == null) {
+                this.convertedValue.set(null);
+            }
+            if (this.isArray(rawValue)) {
+                this.convertedValue.set(rawValue.map((item) => this.handleFormat(item)).join(', '));
+            }
+            else {
+                this.convertedValue.set(await this.handleFormat(rawValue));
+            }
+        };
     }
-    handleFormat(value) {
+    #effect;
+    async handleFormat(value) {
+        let mode = '';
+        if (this.format() == 'date') {
+            mode = await this.settingService.get('regional:short-date');
+        }
+        else if (this.format() == 'time') {
+            mode = await this.settingService.get('regional:short-time');
+        }
+        else if (this.format() == 'datetime') {
+            mode = `${await this.settingService.get('regional:short-date')} ${await this.settingService.get('regional:short-time')}`;
+        }
         return value
-            ? this.formatter.format(new Date(value), {
-                format: this.format(),
-                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            ? this.formatter.format(new Date(value), this.format(), {
+                format: mode,
             })
             : '---';
     }
+    isArray(val) {
+        return Array.isArray(val);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-text-muted">
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-        <span dir="ltr" >{{ item }}</span>
-      } 
-      } @else {
-        <span dir="ltr" >{{ internalValue()[0] }}</span>
-      }
+      <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1846,18 +1896,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     template: `
     <div class="ax-text-muted">
-      @if(multiple()){ 
-        @for (item of internalValue(); track $index) {
-        <span dir="ltr" >{{ item }}</span>
-      } 
-      } @else {
-        <span dir="ltr" >{{ internalValue()[0] }}</span>
-      }
+      <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
-                    inputs: []
+                    inputs: [],
                 }]
         }] });
 
@@ -2047,9 +2091,10 @@ var dateTimeBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.formatter = inject(AXDateTimeFormatter);
-        this.translationService = inject(AXTranslationService);
-        this.multiple = this.options['multiple'];
+        this.formatter = inject(AXFormatService);
+        this.settingService = inject(AXPSettingService);
+        this.convertedValue = signal(this.rawValue);
+        this.multiple = this.options['multiple'] || false;
         this.format = computed(() => {
             const rawValue = this.options['format'];
             if (typeof rawValue == 'string')
@@ -2059,28 +2104,53 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
             else
                 return 'date';
         });
-        this.internalValue = () => Array.isArray(this.rawValue)
-            ? this.rawValue.map((v) => this.handleFormat(v))
-            : [this.handleFormat(this.rawValue)];
+        this.#effect = effect(() => {
+            this.updateValue();
+        });
+        this.updateValue = async () => {
+            const rawValue = this.rawValue;
+            if (rawValue == null) {
+                this.convertedValue.set(null);
+            }
+            if (this.isArray(rawValue)) {
+                this.convertedValue.set(rawValue.map((item) => this.handleFormat(item)).join(', '));
+            }
+            else {
+                this.convertedValue.set(await this.handleFormat(rawValue));
+            }
+        };
     }
-    handleFormat(value) {
+    #effect;
+    async handleFormat(value) {
+        let mode = '';
+        if (this.format() == 'date') {
+            mode = await this.settingService.get('regional:short-date');
+        }
+        else if (this.format() == 'time') {
+            mode = await this.settingService.get('regional:short-time');
+        }
+        else if (this.format() == 'datetime') {
+            mode = `${await this.settingService.get('regional:short-date')} ${await this.settingService.get('regional:short-time')}`;
+        }
         return value
-            ? this.formatter.format(new Date(value), {
-                format: this.format(),
-                locale: this.translationService.getActiveLang() === 'fa' ? 'fa' : undefined,
+            ? this.formatter.format(new Date(value), this.format(), {
+                format: mode,
             })
             : '---';
     }
+    isArray(val) {
+        return Array.isArray(val);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPDateTimeBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex">
-    <span [dir]="'ltr'" [title]="internalValue()">{{ internalValue() }}</span>
+    <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: "20.0.7", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="ax-flex">
-    <span [dir]="'ltr'" [title]="internalValue()">{{ internalValue() }}</span>
+    <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
@@ -5042,6 +5112,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         super(...arguments);
         this.valueField = this.options['valueField'] ?? 'id';
         this.textField = this.options['textField'] ?? 'title';
+        this.badgeClass = this.options['badgeClass'] ?? 'ax-accent1';
         this.internalValue = computed(() => castArray(this.rawValue).map((item) => this.extractItem(item)));
     }
     extractItem(item) {
@@ -5058,7 +5129,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-    <ax-badge  [text]="item[this.textField]" color="primary"></ax-badge>
+    <ax-badge  [text]="item[this.textField]"  [class]="badgeClass"></ax-badge>
     }
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5067,7 +5138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-    <ax-badge  [text]="item[this.textField]" color="primary"></ax-badge>
+    <ax-badge  [text]="item[this.textField]"  [class]="badgeClass"></ax-badge>
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5277,6 +5348,7 @@ class AXPSelectBoxWidgetViewComponent extends AXPValueWidgetComponent {
         this.multiple = computed(() => this.options()['multiple']);
         this.valueField = computed(() => this.options()['valueField'] ?? 'id');
         this.textField = computed(() => this.options()['textField'] ?? 'title');
+        this.badgeClass = computed(() => this.options()['badgeClass'] ?? 'ax-accent1');
         this.internalValue = computed(() => Array.isArray(this.getValue())
             ? this.getValue().map((item) => this.extractItem(item))
             : [this.extractItem(this.getValue())]);
@@ -5302,7 +5374,7 @@ class AXPSelectBoxWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "axp-select-box-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item.text" ></ax-badge>
+    <ax-badge class="ax-p-0.5 {{badgeClass()}}"  [text]="item.text" ></ax-badge>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5312,7 +5384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     selector: 'axp-select-box-widget-view',
                     template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item.text" ></ax-badge>
+    <ax-badge class="ax-p-0.5 {{badgeClass()}}"  [text]="item.text" ></ax-badge>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6201,7 +6273,13 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.readonly = computed(() => this.options()['readonly']);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.translatedValues = {};
-        this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
+        this.internalValue = computed(() => {
+            const value = this.getValue();
+            if (Array.isArray(value)) {
+                return value.length > 0 ? value : [undefined];
+            }
+            return [value];
+        });
     }
     ngOnInit() {
         super.ngOnInit();
@@ -16858,6 +16936,7 @@ class AXPWidgetsModule {
                     AXPRichTextWidget,
                     AXPNumberBoxWidget,
                     AXPSignatureWidget,
+                    AXPLinkWidget,
                     AXPDateTimeBoxWidget,
                     AXPContactWidget,
                     AXPSelectionListWidget,
@@ -16936,6 +17015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                                 AXPRichTextWidget,
                                 AXPNumberBoxWidget,
                                 AXPSignatureWidget,
+                                AXPLinkWidget,
                                 AXPDateTimeBoxWidget,
                                 AXPContactWidget,
                                 AXPSelectionListWidget,