@acorex/platform 20.0.4 → 20.0.6

package/fesm2022/acorex-platform-widgets.mjs

@@ -10,7 +10,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i2$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, CUSTOM_ELEMENTS_SCHEMA, untracked, Injectable, output, input, ChangeDetectorRef, viewChild, ElementRef, afterEveryRender, NgZone, model, linkedSignal, HostListener, importProvidersFrom, NgModule } from '@angular/core';
+import { computed, EventEmitter, ChangeDetectionStrategy, Component, inject, afterNextRender, HostBinding, signal, effect, ViewEncapsulation, InjectionToken, ViewChild, CUSTOM_ELEMENTS_SCHEMA, untracked, Injectable, output, input, ChangeDetectorRef, viewChild, ElementRef, afterEveryRender, NgZone, model, linkedSignal, HostListener, importProvidersFrom, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i4 from '@acorex/components/form';
@@ -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';
@@ -34,12 +34,12 @@ import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDateTimeFormatter, AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$1 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
+import { AXFormatService } from '@acorex/core/format';
 import * as i5 from '@acorex/components/text-area';
 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$5 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$2 from '@acorex/components/password-box';
@@ -826,6 +826,7 @@ const AXP_LAYOUT_DIRECTION_PROPERTY = {
     name: 'direction',
     title: 'Direction',
     group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    order: 99,
     schema: {
         dataType: 'string',
         defaultValue: 'ltr',
@@ -1124,7 +1125,7 @@ class AXPCheckBoxWidgetEditComponent extends AXPValueWidgetComponent {
       <ax-label>{{ label() }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1181,7 +1182,7 @@ const AXPCheckBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-5kuroU6r.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-BuU7nJ6u.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
             component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-BgrIeNW0.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
@@ -1704,7 +1705,7 @@ class AXPContactWidgetViewComponent extends AXPValueWidgetComponent {
       }
     </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPContactWidgetViewComponent, decorators: [{
             type: Component,
@@ -1836,11 +1837,13 @@ class AXPDateTimeBoxWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDateTimeBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPDateTimeBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div>
-      @if(multiple()){ @for (item of internalValue(); track $index) {
-      <span dir="ltr">{{ item }}</span>
-      } } @else {
-      <span dir="ltr">{{ internalValue()[0] }}</span>
+    <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>
       }
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1849,11 +1852,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div>
-      @if(multiple()){ @for (item of internalValue(); track $index) {
-      <span dir="ltr">{{ item }}</span>
-      } } @else {
-      <span dir="ltr">{{ internalValue()[0] }}</span>
+    <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>
       }
     </div>
   `,
@@ -2049,11 +2054,11 @@ var dateTimeBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.formatter = inject(AXDateTimeFormatter);
-        this.translationService = inject(AXTranslationService);
-        this.convertedValue = computed(() => this.updateValue());
+        this.formatter = inject(AXFormatService);
+        this.settingService = inject(AXPSettingService);
+        this.convertedValue = signal(this.rawValue);
         this.multiple = this.options['multiple'] || false;
-        this.format = computed(() => {
+        this.mode = computed(() => {
             const rawValue = this.options['format'];
             if (typeof rawValue == 'string')
                 return rawValue;
@@ -2062,24 +2067,28 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
             else
                 return 'date';
         });
-        this.updateValue = () => {
+        this.#effect = effect(() => {
+            this.updateValue();
+        });
+        this.updateValue = async () => {
             const rawValue = this.rawValue;
             if (rawValue == null) {
-                return null;
+                this.convertedValue.set(null);
             }
             if (this.isArray(rawValue)) {
-                return rawValue.map((item) => this.handleFormat(item)).join(', ');
+                this.convertedValue.set(rawValue.map((item) => this.handleFormat(item)).join(', '));
             }
             else {
-                return this.handleFormat(rawValue);
+                this.convertedValue.set(await this.handleFormat(rawValue));
             }
         };
     }
-    handleFormat(value) {
+    #effect;
+    async handleFormat(value) {
+        const format = await this.settingService.get('regional:short-date');
         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.mode(), {
+                format: format,
             })
             : '---';
     }
@@ -2089,7 +2098,7 @@ class AXPDateTimeBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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]="convertedValue()">{{ convertedValue() }}</span>
-  </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDateTimeBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -2098,8 +2107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
     <span [dir]="'ltr'" [title]="convertedValue()">{{ convertedValue() }}</span>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [],
-                    inputs: ['rawValue', 'rowData']
+                    imports: [CommonModule],
+                    inputs: ['rawValue', 'rowData'],
                 }]
         }] });
 
@@ -2231,7 +2240,7 @@ class AXPEmailBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPEmailBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -2686,7 +2695,7 @@ const AXPEmailBoxWidget = {
 class AXPLargeTextWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLargeTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPLargeTextWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-max-w-full">
+    <div class="ax-max-w-full ax-text-muted">
       <span>
         {{ getValue() }}
       </span>
@@ -2697,7 +2706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div class="ax-max-w-full">
+    <div class="ax-max-w-full ax-text-muted">
       <span>
         {{ getValue() }}
       </span>
@@ -2748,7 +2757,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
         this.close(this.values);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectLanguagePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-grid ax-grid-cols-12\">\n  <aside class=\"ax-col-span-4 ax-border-r ax-border-gray-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of languageList(); track $index) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"$index.toString()\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"language.context.value?.length ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"ax-font-semibold ax-self-start ax-mb-4\">{{language.title}}</p>\n          <div class=\"ax-flex ax-flex-grow ax-items-center ax-justify-center\">\n            <axp-widgets-container\n              class=\"ax-flex ax-flex-col ax-gap-2 ax-p-4\"\n              [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event,language)\"\n            >\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"ax-col-span-8 ax-p-4 ax-flex ax-flex-col ax-pb-32\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n<ax-footer>\n  <ax-suffix>\n    <ax-button [text]=\"('cancel' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button color=\"primary\" [text]=\"('save' | translate | async)\" (onClick)=\"onSaveButtonClick()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i4$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i4$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i4$1.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-grid ax-grid-cols-12\">\n  <aside class=\"ax-col-span-4 ax-border-r ax-border-gray-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of languageList(); track $index) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"$index.toString()\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"language.context.value?.length ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"ax-font-semibold ax-self-start ax-mb-4\">{{language.title}}</p>\n          <div class=\"ax-flex ax-flex-grow ax-items-center ax-justify-center\">\n            <axp-widgets-container\n              class=\"ax-flex ax-flex-col ax-gap-2 ax-p-4\"\n              [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event,language)\"\n            >\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"ax-col-span-8 ax-p-4 ax-flex ax-flex-col ax-pb-32\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n<ax-footer>\n  <ax-suffix>\n    <ax-button [text]=\"('cancel' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button color=\"primary\" [text]=\"('save' | translate | async)\" (onClick)=\"onSaveButtonClick()\"></ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i4$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i4$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i4$1.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectLanguagePopup, decorators: [{
             type: Component,
@@ -3090,7 +3099,7 @@ class AXPLinkWidgetViewComponent extends AXPValueWidgetComponent {
       </div>
       }
     </ng-template>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLinkWidgetViewComponent, decorators: [{
             type: Component,
@@ -3649,7 +3658,7 @@ class AXPNumberBoxWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPNumberBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPNumberBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()){ @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -3662,7 +3671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()){ @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -4291,7 +4300,7 @@ class AXPPhoneBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       </ng-template>
     </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPhoneBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -4739,14 +4748,14 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPRichTextWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="getValue() | safe : 'html'">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPRichTextWidgetViewComponent, isStandalone: true, selector: "axp-rich-text-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted" (click)="openPopup()" [innerHTML]="getValue() | safe : 'html'">
   </span>`, isInline: true, dependencies: [{ kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPRichTextWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-rich-text-widget',
-                    template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()" [innerHTML]="getValue() | safe : 'html'">
+                    template: ` <span class="ax-truncate ax-underline ax-cursor-pointer ax-text-muted" (click)="openPopup()" [innerHTML]="getValue() | safe : 'html'">
   </span>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXSafePipe],
@@ -5072,7 +5081,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     @for (item of internalValue(); track $index) {
     <ax-badge  [text]="item[this.textField]" color="primary"></ax-badge>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5152,13 +5161,13 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     }
     #effect;
     refresh() {
-        this.selectbox?.refresh();
+        setTimeout(() => {
+            this.selectbox?.refresh();
+        }, 0);
     }
     clear() {
         this.selectbox?.reset(true);
-        setTimeout(() => {
-            this.refresh();
-        }, 0);
+        this.refresh();
     }
     get item() {
         return this.selectedItems()[0];
@@ -5314,9 +5323,9 @@ class AXPSelectBoxWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
+    <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item.text" ></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -5324,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: 'axp-select-box-widget-view',
                     template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
+    <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item.text" ></ax-badge>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5409,9 +5418,9 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectionListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPSelectionListWidgetViewComponent, isStandalone: true, selector: "axp-selection-list-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  [look]="'twotone'" [text]="item[this.textField()]" color="primary"></ax-badge>
+    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectionListWidgetViewComponent, decorators: [{
             type: Component,
@@ -5419,7 +5428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: 'axp-selection-list-widget-view',
                     template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  [look]="'twotone'" [text]="item[this.textField()]" color="primary"></ax-badge>
+    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -5658,7 +5667,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     } }@else {
     <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6162,7 +6171,7 @@ class AXPTextBoxWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPTextBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPTextBoxWidgetViewComponent, isStandalone: true, selector: "axp-text-box-widget", usesInheritance: true, ngImport: i0, template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple())
       { 
         @for (item of internalValue(); track $index) {
@@ -6179,7 +6188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             args: [{
                     selector: 'axp-text-box-widget',
                     template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple())
       { 
         @for (item of internalValue(); track $index) {
@@ -6534,7 +6543,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -6665,7 +6674,7 @@ class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "text", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
@@ -9805,8 +9814,10 @@ class AXPPageWidgetViewComponent extends AXPLayoutWidgetComponent {
         this.backgroundColor = computed(() => this.options()["backgroundColor"]);
     }
     get __style() {
+        const direction = this.options()?.['direction'];
         return {
             'background-color': this.backgroundColor(),
+            direction: direction ?? 'ltr',
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -9864,6 +9875,7 @@ const AXPPageWidget = {
             group: AXP_BEHAVIOR_PROPERTY_GROUP,
             defaultValue: true,
         }),
+        AXP_LAYOUT_DIRECTION_PROPERTY,
     ],
     components: {
         view: {
@@ -9876,7 +9888,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-tITe8tiu.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-Dwts3at7.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -11723,7 +11735,7 @@ class AXPBetweenValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.0.4", ngImport: i0, type: AXPBetweenValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -12019,7 +12031,7 @@ class AXPGreaterThanValidationWidgetEditComponent extends AXPValueWidgetComponen
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.0.4", ngImport: i0, type: AXPGreaterThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -12126,7 +12138,7 @@ class AXPLessThanValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.0.4", ngImport: i0, type: AXPLessThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -13125,7 +13137,7 @@ class AXPMetaDataWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPMetaDataWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPMetaDataWidgetViewComponent, isStandalone: true, selector: "axp-meta-data-widget", usesInheritance: true, ngImport: i0, template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()) { @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -13139,7 +13151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             args: [{
                     selector: 'axp-meta-data-widget',
                     template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()) { @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -13476,7 +13488,7 @@ class AXPNumberUnitBoxWidgetViewComponent extends AXPValueWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPNumberUnitBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: AXPNumberUnitBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()){ @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -13489,7 +13501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div>
+    <div class="ax-text-muted">
       @if(multiple()){ @for (item of internalValue(); track $index) {
       <p>{{ item }}</p>
       } }@else {
@@ -13874,12 +13886,12 @@ class AXPTimerDurationWidgetViewComponent extends AXPValueWidgetComponent {
         this.internalValue = computed(() => this.timeDurationFormatter.millisecondsToMask(this.getValue(), this.from(), this.to()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPTimerDurationWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPTimerDurationWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<p>{{ internalValue() | async }}</p>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPTimerDurationWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<p class="ax-text-muted">{{ internalValue() | async }}</p>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPTimerDurationWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<p>{{ internalValue() | async }}</p>`,
+                    template: `<p class="ax-text-muted">{{ internalValue() | async }}</p>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule],
                 }]