@acorex/platform 21.0.0-next.7 → 21.0.0-next.8

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -35,11 +35,11 @@ import { AXColorUtil } from '@acorex/core/utils';
 import { AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
 import * as i2$2 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
+import { isNil, isNull, isEmpty, isNumber, castArray, set, get, isEqual, cloneDeep } from 'lodash-es';
 import { AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPComponentSlotModule, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
 import * as i2$3 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
-import { isNull, isEmpty, isNumber, castArray, isNil, set, get, isEqual, cloneDeep } from 'lodash-es';
 import { AXFormatService } from '@acorex/core/format';
 import * as i3$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
@@ -1884,7 +1884,7 @@ const AXPCheckBoxWidget = {
 class AXPColorBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rgba = computed(() => AXColorUtil.toString(this.rawValue, 'rgba'), ...(ngDevMode ? [{ debugName: "rgba" }] : []));
+        this.rgba = () => AXColorUtil.toString(this.rawValue, 'rgba');
         this.clipboard = inject(AXPClipBoardService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -2111,31 +2111,47 @@ const AXPColorBoxWidget = {
 class AXPColorPaletteWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rgba = computed(() => AXColorUtil.toString(this.rawValue, 'rgba'), ...(ngDevMode ? [{ debugName: "rgba" }] : []));
+        //#region ----   Computed Properties   ----
+        this.hasValue = () => !isNil(this.rawValue);
+        this.rgba = () => AXColorUtil.toString(this.rawValue, 'rgba');
+        //#endregion
+        //#region ----   Services & Dependencies   ----
         this.clipboard = inject(AXPClipBoardService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPColorPaletteWidgetColumnComponent, isStandalone: true, selector: "axp-color-palette-widget-column", 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">
-    <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
-    <span>{{ rawValue }}</span>
-    <i
-      (click)="clipboard.copy('Color', 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColorPaletteWidgetColumnComponent, isStandalone: true, selector: "axp-color-palette-widget-column", 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">
+        <div class="ax-size-4 ax-rounded-full ax-border" [style.backgroundColor]="rgba()"></div>
+        <span>{{ rawValue }}</span>
+        <i
+          (click)="clipboard.copy('Color', 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>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-color-palette-widget-column',
-                    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>{{ rawValue }}</span>
-    <i
-      (click)="clipboard.copy('Color', 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>`,
+                    template: `
+    @if (hasValue()) {
+      <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>{{ rawValue }}</span>
+        <i
+          (click)="clipboard.copy('Color', 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>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
                     inputs: ['rawValue', 'rowData'],
@@ -2361,31 +2377,47 @@ var colorPaletteWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPColorPaletteWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Computed Properties   ----
+        this.hasValue = computed(() => !isNil(this.getValue()), ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
         this.rgba = computed(() => AXColorUtil.toString(this.getValue(), 'rgba'), ...(ngDevMode ? [{ debugName: "rgba" }] : []));
+        //#endregion
+        //#region ----   Services & Dependencies   ----
         this.clipboard = inject(AXPClipBoardService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPColorPaletteWidgetViewComponent, isStandalone: true, selector: "axp-color-palette-widget-view", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColorPaletteWidgetViewComponent, isStandalone: true, selector: "axp-color-palette-widget-view", 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">
+        <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>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-color-palette-widget-view',
-                    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>`,
+                    template: `
+    @if (hasValue()) {
+      <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>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
@@ -2609,7 +2641,7 @@ var connectedListsWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPConnectedListsWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.allItems = computed(() => this.rawValue ?? [], ...(ngDevMode ? [{ debugName: "allItems" }] : []));
+        this.allItems = () => this.rawValue ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPConnectedListsWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPConnectedListsWidgetColumnComponent, isStandalone: true, selector: "axp-connected-drag-drop-lists-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<axp-column-item-list [items]="allItems()" />`, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: AXPColumnItemListComponent, selector: "axp-column-item-list", inputs: ["items"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -4245,7 +4277,7 @@ var listWidgetView_component = /*#__PURE__*/Object.freeze({
 class AXPListWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.allItems = computed(() => this.rawValue ?? [], ...(ngDevMode ? [{ debugName: "allItems" }] : []));
+        this.allItems = () => this.rawValue ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPListWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPListWidgetColumnComponent, isStandalone: true, selector: "axp-drag-drop-list-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<axp-column-item-list [items]="allItems()" />`, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: AXPColumnItemListComponent, selector: "axp-column-item-list", inputs: ["items"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -7426,14 +7458,14 @@ class AXPTextBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         this.translationService = inject(AXTranslationService);
-        this.displayText = computed(() => {
+        this.displayText = () => {
             const v = this.rawValue;
             if (typeof v === 'string' || v === undefined) {
                 return v ?? '';
             }
             const lang = this.translationService.getActiveLang();
             return v?.[lang] ?? '';
-        }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTextBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPTextBoxWidgetColumnComponent, isStandalone: true, selector: "axp-text-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
@@ -7442,7 +7474,7 @@ class AXPTextBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="ax-text-muted">---</span>
     }
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTextBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -7454,10 +7486,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     } @else {
       <span class="ax-text-muted">---</span>
     }
-    `,
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
-                    inputs: ['rawValue', 'rowData']
+                    inputs: ['rawValue', 'rowData'],
                 }]
         }] });
 
@@ -10879,7 +10911,7 @@ class AXPImageMarkerWidgetColumnComponent extends AXPColumnWidgetComponent {
         super();
         this.layoutBuilder = inject(AXPLayoutBuilderService);
         this.rawImage = computed(() => this.options?.image, ...(ngDevMode ? [{ debugName: "rawImage" }] : []));
-        this.rawPoints = computed(() => this.rawValue, ...(ngDevMode ? [{ debugName: "rawPoints" }] : []));
+        this.rawPoints = () => this.rawValue;
         this.imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
         effect(() => {
             const imageSource = this.rawImage();
@@ -12030,35 +12062,63 @@ var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPQrcodeWidgetEditComponent: AXPQrcodeWidgetEditComponent
 });
 
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
 class AXPSchedulerPickerWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Services & Dependencies   ----
         this.schedulerPickerService = inject(AXSchedulerPickerService);
+        //#endregion
+        //#region ----   Computed Properties   ----
         this.summary = signal('', ...(ngDevMode ? [{ debugName: "summary" }] : []));
         this.#summaryEffect = effect(async () => {
             const value = this.rawValue;
-            if (!value) {
-                this.summary.set('');
+            if (typeof value === 'string') {
+                this.summary.set(value);
                 return;
             }
-            try {
-                const data = await this.schedulerPickerService.toNaturalLanguage(value);
-                this.summary.set(data);
-            }
-            catch (error) {
-                this.summary.set('');
+            if (this.isSchedulerValue(value)) {
+                try {
+                    const text = await this.schedulerPickerService.toNaturalLanguage(value);
+                    this.summary.set(text);
+                }
+                catch (err) {
+                    console.error(err);
+                    this.summary.set('');
+                }
+                return;
             }
+            this.summary.set('');
         }, ...(ngDevMode ? [{ debugName: "#summaryEffect" }] : []));
     }
+    //#endregion
+    //#region ----   Effects   ----
+    isSchedulerValue(value) {
+        return !!value && typeof value === 'object' && 'mode' in value;
+    }
     #summaryEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSchedulerPickerWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetColumnComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-column", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{ summary() || '-' }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetColumnComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-column", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `
+    @if (summary()) {
+      <span class="ax-text-sm" [title]="summary()">{{ summary() }}</span>
+    } @else {
+      <span class="ax-text-sm ax-text-muted">---</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSchedulerPickerWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-scheduler-picker-widget-column',
-                    template: `{{ summary() || '-' }}`,
+                    template: `
+    @if (summary()) {
+      <span class="ax-text-sm" [title]="summary()">{{ summary() }}</span>
+    } @else {
+      <span class="ax-text-sm ax-text-muted">---</span>
+    }
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     inputs: ['rawValue'],
                 }]
@@ -12069,32 +12129,73 @@ var schedulerPickerWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPSchedulerPickerWidgetColumnComponent: AXPSchedulerPickerWidgetColumnComponent
 });
 
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
 class AXPSchedulerPickerWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => this.getValue() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
-        this.settings = computed(() => this.options()['config'] ?? { mode: 'daily' }, ...(ngDevMode ? [{ debugName: "settings" }] : []));
+        //#region ----   Services & Dependencies   ----
+        this.schedulerPickerService = inject(AXSchedulerPickerService);
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.internalValue = computed(() => this.getValue() ?? {
+            mode: 'daily',
+            interval: 1,
+            startCondition: { type: 'now', startDate: new Date() },
+            recurrence: {}, // Daily doesn't require specific recurrence data
+            endCondition: { type: 'never' },
+        }, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+        this.settings = computed(() => this.options()['config'] ?? {
+            mode: 'daily',
+            showStartCondition: true,
+            showEndConditions: true,
+            showExclusions: false,
+            showInclusions: false,
+            options: { showInterval: true, showWeekdaysOnly: false },
+        }, ...(ngDevMode ? [{ debugName: "settings" }] : []));
         this.disabled = computed(() => this.options()['disabled'] ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.summary = signal('', ...(ngDevMode ? [{ debugName: "summary" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        this.#summaryEffect = effect(async () => {
+            const value = this.internalValue();
+            if (!value) {
+                this.summary.set('');
+                return;
+            }
+            try {
+                const data = await this.schedulerPickerService.toNaturalLanguage(value);
+                this.summary.set(data);
+            }
+            catch (error) {
+                this.summary.set('');
+            }
+        }, ...(ngDevMode ? [{ debugName: "#summaryEffect" }] : []));
     }
-    onSummary(text) {
-        console.log(text);
-        this.summary.set(text);
-    }
+    //#endregion
+    //#region ----   Effects   ----
+    #summaryEffect;
+    //#endregion
+    //#region ----   Event Handlers   ----
     onValueChange(val) {
         this.setValue(val);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSchedulerPickerWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetEditComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-p-2">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetEditComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-p-2 ax-flex ax-flex-col ax-gap-2">
       <ax-scheduler-picker
         [config]="settings()"
         [ngModel]="internalValue()"
         [disabled]="disabled()"
         (ngModelChange)="onValueChange($event)"
-        (summaryChange)="onSummary($event)"
       />
-      <ax-label>{{ summary() }}</ax-label>
+      @if (summary()) {
+        <div class="ax-mt-2">
+          <ax-label class="ax-text-sm ax-font-medium">Summary:</ax-label>
+          <ax-label class="ax-text-sm ax-text-muted">{{ summary() }}</ax-label>
+        </div>
+      }
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: AXSchedulerPickerComponent, selector: "ax-scheduler-picker", inputs: ["disabled", "readonly", "tabIndex", "value", "state", "name", "id", "config"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "summaryChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -12103,15 +12204,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{
                     selector: 'axp-scheduler-picker-widget-edit',
                     template: `
-    <div class="ax-p-2">
+    <div class="ax-p-2 ax-flex ax-flex-col ax-gap-2">
       <ax-scheduler-picker
         [config]="settings()"
         [ngModel]="internalValue()"
         [disabled]="disabled()"
         (ngModelChange)="onValueChange($event)"
-        (summaryChange)="onSummary($event)"
       />
-      <ax-label>{{ summary() }}</ax-label>
+      @if (summary()) {
+        <div class="ax-mt-2">
+          <ax-label class="ax-text-sm ax-font-medium">Summary:</ax-label>
+          <ax-label class="ax-text-sm ax-text-muted">{{ summary() }}</ax-label>
+        </div>
+      }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -12125,39 +12230,67 @@ var schedulerPickerWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPSchedulerPickerWidgetEditComponent: AXPSchedulerPickerWidgetEditComponent
 });
 
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
 class AXPSchedulerPickerWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Services & Dependencies   ----
         this.schedulerPickerService = inject(AXSchedulerPickerService);
+        //#endregion
+        //#region ----   Computed Properties   ----
         this.summary = signal('', ...(ngDevMode ? [{ debugName: "summary" }] : []));
         this.#summaryEffect = effect(async () => {
             const value = this.getValue();
-            if (!value) {
-                this.summary.set('');
+            if (typeof value === 'string') {
+                this.summary.set(value);
                 return;
             }
-            try {
-                const data = await this.schedulerPickerService.toNaturalLanguage(value);
-                this.summary.set(data);
-            }
-            catch (error) {
-                this.summary.set('');
+            if (this.isSchedulerValue(value)) {
+                try {
+                    const text = await this.schedulerPickerService.toNaturalLanguage(value);
+                    this.summary.set(text);
+                }
+                catch (err) {
+                    console.error(err);
+                    this.summary.set('');
+                }
+                return;
             }
+            this.summary.set('');
         }, ...(ngDevMode ? [{ debugName: "#summaryEffect" }] : []));
     }
+    //#endregion
+    //#region ----   Effects   ----
+    isSchedulerValue(value) {
+        return !!value && typeof value === 'object' && 'mode' in value;
+    }
     #summaryEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSchedulerPickerWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetViewComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-view", host: { classAttribute: "ax-inline-block" }, usesInheritance: true, ngImport: i0, template: `<p class="ax-p-2">
-    <ax-label>{{ summary() }}</ax-label>
-  </p> `, isInline: true, dependencies: [{ kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSchedulerPickerWidgetViewComponent, isStandalone: true, selector: "axp-scheduler-picker-widget-view", host: { classAttribute: "ax-inline-block" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-p-2">
+      @if (summary()) {
+        <ax-label class="ax-text-sm">{{ summary() }}</ax-label>
+      } @else {
+        <ax-label class="ax-text-sm ax-text-muted">---</ax-label>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSchedulerPickerWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-scheduler-picker-widget-view',
-                    template: `<p class="ax-p-2">
-    <ax-label>{{ summary() }}</ax-label>
-  </p> `,
+                    template: `
+    <div class="ax-p-2">
+      @if (summary()) {
+        <ax-label class="ax-text-sm">{{ summary() }}</ax-label>
+      } @else {
+        <ax-label class="ax-text-sm ax-text-muted">---</ax-label>
+      }
+    </div>
+  `,
                     imports: [AXLabelComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'ax-inline-block' },