@acorex/platform 21.0.0-next.88 → 21.0.0-next.89

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

@@ -22,7 +22,7 @@ import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString } from '@acorex/core/translation';
 import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, AXPIntegrationProviderRegistryService, normalizePositiveNumberOption, resolveEntityRowDisplayText, resolveEntityRowDisplayTitle, downloadGraphicFromElement, printGraphicFromElement, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
-import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex/platform/core';
+import { AXPDeviceService, setupPopupFooterKeyboardShortcuts, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPDebugService, FORM_DIRTY_TRACE_NS, isSelectionValueEqual, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, isFormValueEqual, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex/platform/core';
 import * as i1$4 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -31,7 +31,7 @@ import * as i1$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import { set, get, castArray, isNil, isNull, isEmpty, isNumber, defaultTo, isEqual, cloneDeep } from 'lodash-es';
+import { set, get, castArray, isNil, isNull, isEmpty, first, isNumber, defaultTo, has, isEqual, cloneDeep } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPCommandService, AXPQueryService, provideQuerySetups } from '@acorex/platform/runtime';
@@ -73,7 +73,7 @@ import * as i2$5 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i5$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import { first } from 'rxjs';
+import { first as first$1 } from 'rxjs';
 import * as i2$6 from '@acorex/components/autocomplete';
 import { AXAutocompleteModule } from '@acorex/components/autocomplete';
 import * as i1$9 from '@acorex/components/tag-box';
@@ -165,6 +165,18 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
             }
             return list.filter((l) => l.isLocaleProfile || this.hasTranslationContent(l.context?.value));
         }, ...(ngDevMode ? [{ debugName: "visibleLanguageList" }] : /* istanbul ignore next */ []));
+        setupPopupFooterKeyboardShortcuts(() => [
+            {
+                title: '@general:actions.cancel.title',
+                command: 'cancel',
+                handler: () => this.close(),
+            },
+            {
+                title: '@general:actions.save.title',
+                command: 'submit',
+                handler: () => this.onSaveButtonClick(),
+            },
+        ], { id: 'select-language-popup' });
     }
     //#region ---- Lifecycle ----
     ngOnInit() {
@@ -3171,42 +3183,80 @@ class AXPAddressWidgetService {
      */
     buildAddressFormContent(flex, options) {
         const { labels = [], hasMap, addressData } = options;
-        flex
-            .mode('edit')
-            .setDirection('column')
-            .setGap('16px');
-        if (labels.length > 0) {
-            flex.formField('@location-management:locations.entities.location.fields.label', (field) => {
-                field.path('label');
+        const hasLabel = labels.length > 0;
+        flex.mode('edit').setDirection('column').setGap('12px');
+        //#region ----   Row 1: label + show map   ----
+        if (hasLabel || hasMap) {
+            flex.grid((metaRow) => {
+                metaRow.setColumns(12).setGap('12px');
+                if (hasLabel) {
+                    const defaultLabelId = this.resolveDefaultLabelId(labels);
+                    metaRow.formField('@location-management:locations.entities.location.fields.label', (field) => {
+                        field.path('label');
+                        field.layout(3);
+                        if (defaultLabelId) {
+                            field.defaultValue(defaultLabelId);
+                        }
+                        field.selectBox({
+                            valueField: 'id',
+                            textField: 'name',
+                            dataSource: labels,
+                            validations: [{ rule: 'required', message: '@general:validation.messages.required' }],
+                        });
+                    });
+                }
+                if (hasMap) {
+                    metaRow.formField('@location-management:locations.entities.location.fields.show-map', (field) => {
+                        field.path('showMap');
+                        field.layout(3);
+                        field.toggleSwitch({
+                            defaultValue: !!(addressData?.coordinates),
+                        });
+                    });
+                }
+            });
+        }
+        //#endregion
+        //#region ----   Row 2: street address + address line 2   ----
+        flex.grid((streetRow) => {
+            streetRow.setColumns(12).setGap('12px');
+            streetRow
+                .formField('@location-management:locations.entities.location.fields.street1', (field) => {
+                field.path('street1');
                 field.layout(6);
-                field.selectBox({
-                    valueField: 'id',
-                    textField: 'name',
-                    dataSource: labels,
+                field.textBox({
+                    validations: [{ rule: 'required', message: '@general:validation.messages.required' }],
                 });
+            })
+                .formField('@location-management:locations.entities.location.fields.street2', (field) => {
+                field.path('street2');
+                field.layout(6);
+                field.textBox({});
             });
-        }
-        flex
-            .formField('@location-management:locations.entities.location.fields.street1', (field) => {
-            field.path('street1');
-            field.textBox({});
-        })
-            .formField('@location-management:locations.entities.location.fields.street2', (field) => {
-            field.path('street2');
-            field.textBox({});
-        })
-            .flex((row) => {
-            row
-                .setDirection('row')
-                .setGap('16px')
+        });
+        //#endregion
+        //#region ----   Row 3: postal code + country + state + city   ----
+        flex.grid((geoRow) => {
+            geoRow.setColumns(12).setGap('12px');
+            geoRow
+                .formField('@location-management:locations.entities.location.fields.postal-code', (field) => {
+                field.path('postalCode');
+                field.layout(3);
+                field.textBox({ placeholder: 'Enter postal code' });
+            })
                 .formField('@location-management:locations.entities.location.fields.country', (field) => {
-                field.path('country.id');
+                field.path('countryId');
+                field.layout(3);
                 field.customWidget('lookup-editor', {
                     entity: 'LocationManagement.GeographicRegion',
                     look: 'select',
                     textField: 'title',
                     valueField: 'id',
-                    allowClear: true,
+                    hasClearButton: true,
+                    allowCreate: 'quick',
+                    create: {
+                        enable: true,
+                    },
                     expose: [
                         { source: 'id', target: 'country.id' },
                         { source: 'title', target: 'country.title' },
@@ -3218,12 +3268,23 @@ class AXPAddressWidgetService {
                 });
             })
                 .formField('@location-management:locations.entities.location.fields.state', (field) => {
-                field.path('state.id');
+                field.path('stateId');
+                field.layout(3);
                 field.customWidget('lookup-editor', {
                     entity: 'LocationManagement.GeographicRegion',
                     look: 'select',
                     textField: 'title',
                     valueField: 'id',
+                    hasClearButton: true,
+                    allowCreate: 'quick',
+                    disabled: '{{ !context.eval("countryId") }}',
+                    create: {
+                        enable: true,
+                        context: {
+                            parentId: '{{ context.eval("countryId") }}',
+                            type: { code: 'state' },
+                        },
+                    },
                     expose: [
                         { source: 'id', target: 'state.id' },
                         { source: 'title', target: 'state.title' },
@@ -3231,20 +3292,36 @@ class AXPAddressWidgetService {
                     filter: {
                         logic: 'and',
                         filters: [
-                            { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("country.id") }}' },
+                            { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("countryId") }}' },
                             { field: 'type.code', operator: { type: 'equal' }, value: 'state' },
                         ],
                     },
-                    triggers: [{ event: "{{ events.context('country.id') }}", action: '{{ widget.refresh() }}' }],
+                    triggers: [
+                        {
+                            event: "{{ events.context('countryId') }}",
+                            action: "{{ widget.setValue(null); context.set('state.title', null); context.set('cityId', null); context.set('city.id', null); context.set('city.title', null); widget.refresh(); }}",
+                        },
+                    ],
                 });
             })
                 .formField('@location-management:locations.entities.location.fields.city', (field) => {
-                field.path('city.id');
+                field.path('cityId');
+                field.layout(3);
                 field.customWidget('lookup-editor', {
                     entity: 'LocationManagement.GeographicRegion',
                     look: 'select',
                     textField: 'title',
                     valueField: 'id',
+                    hasClearButton: true,
+                    allowCreate: 'quick',
+                    disabled: '{{ !context.eval("stateId") }}',
+                    create: {
+                        enable: true,
+                        context: {
+                            parentId: '{{ context.eval("stateId") }}',
+                            type: { code: 'city' },
+                        },
+                    },
                     expose: [
                         { source: 'id', target: 'city.id' },
                         { source: 'title', target: 'city.title' },
@@ -3252,32 +3329,37 @@ class AXPAddressWidgetService {
                     filter: {
                         logic: 'and',
                         filters: [
-                            { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("state.id") }}' },
+                            { field: 'parentId', operator: { type: 'equal' }, value: '{{ context.eval("stateId") }}' },
                             { field: 'type.code', operator: { type: 'equal' }, value: 'city' },
                         ],
                     },
-                    triggers: [{ event: "{{ events.context('state.id') }}", action: '{{ widget.refresh() }}' }],
+                    triggers: [
+                        {
+                            event: "{{ events.context('stateId') }}",
+                            action: "{{ widget.setValue(null); context.set('city.title', null); widget.refresh(); }}",
+                        },
+                        {
+                            event: "{{ events.context('countryId') }}",
+                            action: "{{ widget.setValue(null); context.set('city.title', null); widget.refresh(); }}",
+                        },
+                    ],
                 });
             });
-        })
-            .formField('@location-management:locations.entities.location.fields.postal-code', (field) => {
-            field.path('postalCode');
-            field.textBox({ placeholder: 'Enter postal code' });
         });
+        //#endregion
+        //#region ----   Map picker (when show map is enabled)   ----
         if (hasMap) {
-            flex
-                .formField('@location-management:locations.entities.location.fields.show-map', (field) => {
-                field.path('showMap');
-                field.toggleSwitch({
-                    defaultValue: !!(addressData?.coordinates),
+            flex.grid((mapRow) => {
+                mapRow.setColumns(12).setGap('12px');
+                mapRow.formField('@location-management:locations.entities.location.fields.coordinates', (field) => {
+                    field.path('coordinates');
+                    field.layout(12);
+                    field.visible('{{ context.eval("showMap") }}');
+                    field.customWidget('map', { hasDraw: true, maxPolygon: 0 });
                 });
-            })
-                .formField('@location-management:locations.entities.location.fields.coordinates', (field) => {
-                field.path('coordinates');
-                field.visible('{{ context.eval("showMap") }}');
-                field.customWidget('map', { hasDraw: true, maxPolygon: 0 });
             });
         }
+        //#endregion
     }
     /**
      * Returns the address form layout node using layoutBuilder.create().flex().build() for use in axp-layout-renderer.
@@ -3289,6 +3371,45 @@ class AXPAddressWidgetService {
             .build();
     }
     //#endregion
+    //#region ----   Geographic Cascade Methods   ----
+    /**
+     * Builds layout context with flat lookup ids (countryId/stateId/cityId) required for cascade triggers.
+     * Same pattern as LocationManagement.Location entity fields.
+     */
+    buildAddressFormContext(addressData, options) {
+        const labels = options?.labels ?? [];
+        const dataWithLabelDefault = labels.length > 0 ? this.applyLabelDefaults(addressData, labels) : addressData;
+        return {
+            ...dataWithLabelDefault,
+            countryId: dataWithLabelDefault.country?.id,
+            stateId: dataWithLabelDefault.state?.id,
+            cityId: dataWithLabelDefault.city?.id,
+            showMap: (options?.hasMap ?? false) && !!dataWithLabelDefault.coordinates,
+        };
+    }
+    /**
+     * Clears dependent geographic fields when a parent selection changes.
+     * Mirrors Location entity cascade: state depends on country, city depends on state.
+     */
+    applyGeographicCascade(previous, next) {
+        const result = { ...next };
+        const previousCountryId = previous.countryId ?? previous.country?.id;
+        const nextCountryId = result.countryId ?? result.country?.id;
+        const previousStateId = previous.stateId ?? previous.state?.id;
+        const nextStateId = result.stateId ?? result.state?.id;
+        if (previousCountryId !== nextCountryId) {
+            result.state = undefined;
+            result.city = undefined;
+            result.stateId = undefined;
+            result.cityId = undefined;
+        }
+        else if (previousStateId !== nextStateId) {
+            result.city = undefined;
+            result.cityId = undefined;
+        }
+        return result;
+    }
+    //#endregion
     //#region ----   Address Formatting Methods   ----
     /**
      * Formats address data into full address string
@@ -3326,16 +3447,30 @@ class AXPAddressWidgetService {
         // Explicitly exclude coordinates from formatted address
         return parts.filter(Boolean).join(', ');
     }
+    /**
+     * Collapse header parts: translated label (semibold in template) + full address.
+     */
+    async resolveCollapsibleHeader(value, options) {
+        const full = (value.full?.trim() || this.formatAddress(value)).trim();
+        const addressText = full !== '' ? full : options.placeholder;
+        const labelId = extractValue(value.label);
+        if (!labelId || options.labels.length === 0) {
+            return { labelText: null, addressText };
+        }
+        const entry = options.labels.find((item) => item.id === labelId);
+        if (!entry) {
+            return { labelText: null, addressText };
+        }
+        const labelText = await this.translationService.translateAsync(entry.name);
+        return { labelText, addressText };
+    }
     //#endregion
     //#region ----   Dialog & UI Methods   ----
     /**
      * Shows address details popup dialog using the shared address form layout.
      */
     async showAddressDetailsPopup(addressData, labels, hasMap = true) {
-        const initialContext = {
-            ...addressData,
-            showMap: hasMap && !!addressData.coordinates,
-        };
+        const initialContext = this.buildAddressFormContext(addressData, { hasMap, labels: labels ?? [] });
         const dialogTitle = await this.translationService.translateAsync('@general:terms.common.address');
         const ref = await this.layoutBuilder
             .create()
@@ -3360,11 +3495,32 @@ class AXPAddressWidgetService {
             ref.close();
             return null;
         }
-        const result = ref.context();
+        const result = this.applyGeographicCascade(initialContext, this.normalizeAddressData(ref.context()));
         ref.close();
         return result;
     }
     //#endregion
+    //#region ----   Label Defaults   ----
+    /** Returns the first configured label id, used as the default selection. */
+    resolveDefaultLabelId(labels) {
+        return first(labels)?.id;
+    }
+    /** Applies the default label when labels are configured and none is set yet. */
+    applyLabelDefaults(value, labels) {
+        if (labels.length === 0) {
+            return value;
+        }
+        const labelId = extractValue(value.label);
+        if (labelId) {
+            return value;
+        }
+        const defaultLabelId = this.resolveDefaultLabelId(labels);
+        if (!defaultLabelId) {
+            return value;
+        }
+        return { ...value, label: defaultLabelId };
+    }
+    //#endregion
     //#region ----   Data Normalization Methods   ----
     /**
      * Normalizes address data from various input formats
@@ -3380,7 +3536,7 @@ class AXPAddressWidgetService {
                 postalCode: value.postalCode,
                 coordinates: value.coordinates,
                 full: value.full ?? this.formatAddress(value),
-                label: value.label,
+                label: extractValue(value.label) ?? undefined,
             };
         }
         // Simple string format
@@ -3410,10 +3566,46 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
         this.addressService = inject(AXPAddressWidgetService);
         /** Collapsible mode: true = panel collapsed (only full address visible), false = expanded (edit button visible) */
         this.collapsibleCollapsed = signal(true, ...(ngDevMode ? [{ debugName: "collapsibleCollapsed" }] : /* istanbul ignore next */ []));
-        this.collapsibleCaption = computed(() => {
-            const full = this.formattedAddress();
-            return full && full.trim() !== '' ? full : this.placeholder();
-        }, ...(ngDevMode ? [{ debugName: "collapsibleCaption" }] : /* istanbul ignore next */ []));
+        this.collapsibleHeaderLabel = signal(null, ...(ngDevMode ? [{ debugName: "collapsibleHeaderLabel" }] : /* istanbul ignore next */ []));
+        this.collapsibleHeaderAddress = signal('', ...(ngDevMode ? [{ debugName: "collapsibleHeaderAddress" }] : /* istanbul ignore next */ []));
+        /** Bumped on parent discard so the nested layout renderer remounts with reverted context. */
+        this.layoutRendererGeneration = signal(0, ...(ngDevMode ? [{ debugName: "layoutRendererGeneration" }] : /* istanbul ignore next */ []));
+        this.parentContextWasRestored = false;
+        this.#resetNestedFormOnDiscard = effect(() => {
+            if (this.addressMode() !== 'expandable') {
+                return;
+            }
+            const isRestored = this.contextService.changeEvent().state === 'restored';
+            if (isRestored && !this.parentContextWasRestored) {
+                this.layoutRendererGeneration.update((generation) => generation + 1);
+            }
+            this.parentContextWasRestored = isRestored;
+        }, ...(ngDevMode ? [{ debugName: "#resetNestedFormOnDiscard" }] : /* istanbul ignore next */ []));
+        this.#ensureDefaultLabelEffect = effect(() => {
+            const labels = this.labels();
+            if (!this.hasLabel() || labels.length === 0) {
+                return;
+            }
+            const value = this.valueAsObject();
+            const labelId = extractValue(value.label);
+            if (labelId) {
+                return;
+            }
+            const defaulted = this.addressService.applyLabelDefaults(value, labels);
+            this.setValue(this.setFormattedValue(defaulted));
+        }, ...(ngDevMode ? [{ debugName: "#ensureDefaultLabelEffect" }] : /* istanbul ignore next */ []));
+        this.#collapsibleHeaderEffect = effect(() => {
+            const value = this.valueAsObject();
+            this.formattedAddress();
+            const labels = this.labels();
+            const placeholder = this.placeholder();
+            void this.addressService
+                .resolveCollapsibleHeader(value, { labels, placeholder })
+                .then((header) => {
+                this.collapsibleHeaderLabel.set(header.labelText);
+                this.collapsibleHeaderAddress.set(header.addressText);
+            });
+        }, ...(ngDevMode ? [{ debugName: "#collapsibleHeaderEffect" }] : /* istanbul ignore next */ []));
         this.addressMode = computed(() => extractValue(this.options()['mode']) || 'simple', ...(ngDevMode ? [{ debugName: "addressMode" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'] || 'Enter address...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.labels = computed(() => this.options()['labels'] || [], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
@@ -3438,13 +3630,10 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
             addressData: this.valueAsObject(),
         }), ...(ngDevMode ? [{ debugName: "addressFormLayout" }] : /* istanbul ignore next */ []));
         /** Context for inline address form (expandable); includes showMap for map toggle. */
-        this.collapsibleFormContext = computed(() => {
-            const value = this.valueAsObject();
-            return {
-                ...value,
-                showMap: this.hasMap() && !!value.coordinates,
-            };
-        }, ...(ngDevMode ? [{ debugName: "collapsibleFormContext" }] : /* istanbul ignore next */ []));
+        this.collapsibleFormContext = computed(() => this.addressService.buildAddressFormContext(this.valueAsObject(), {
+            hasMap: this.hasMap(),
+            labels: this.hasLabel() ? this.labels() : [],
+        }), ...(ngDevMode ? [{ debugName: "collapsibleFormContext" }] : /* istanbul ignore next */ []));
         this.labelsDataSource = new AXDataSource({
             pageSize: 20,
             load: (e) => {
@@ -3459,10 +3648,18 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
             },
         });
     }
+    #resetNestedFormOnDiscard;
+    #ensureDefaultLabelEffect;
+    #collapsibleHeaderEffect;
     onCollapsibleFormContextChange(ctx) {
         if (ctx == null)
             return;
-        const normalized = this.addressService.normalizeAddressData(ctx);
+        const labels = this.hasLabel() ? this.labels() : [];
+        const previous = this.addressService.buildAddressFormContext(this.valueAsObject(), {
+            hasMap: this.hasMap(),
+            labels,
+        });
+        const normalized = this.addressService.normalizeAddressData(this.addressService.applyGeographicCascade(previous, ctx));
         normalized.full = this.addressService.formatAddress(normalized);
         this.setValue(this.setFormattedValue(normalized));
     }
@@ -3540,6 +3737,10 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
             textField="name"
             [ngClass]="generateClasses('label')"
           >
+            <ax-validation-rule
+              rule="required"
+              message="{{ '@general:validation.messages.required' | translate | async }}"
+            ></ax-validation-rule>
           </ax-select-box>
         }
       </div>
@@ -3547,22 +3748,47 @@ class AXPAddressWidgetEditComponent extends AXPValueWidgetComponent {
       <div class="ax-w-full">
         <ax-collapse-group look="fill">
           <ax-collapse
-            [caption]="collapsibleCaption()"
-            icon="fa-light fa-map-marker-alt"
+            [headerTemplate]="collapseHeaderTemplate"
             [showHeader]="true"
             [isCollapsed]="collapsibleCollapsed()"
             (isCollapsedChange)="collapsibleCollapsed.set($event)"
           >
             <div class="ax-pt-1">
-              <axp-layout-renderer
-                [layout]="addressFormLayout()"
-                [context]="collapsibleFormContext()"
-                (contextChange)="onCollapsibleFormContextChange($event)"
-              />
+              @for (formKey of [layoutRendererGeneration()]; track formKey) {
+                <axp-layout-renderer
+                  [layout]="addressFormLayout()"
+                  [context]="collapsibleFormContext()"
+                  (contextChange)="onCollapsibleFormContextChange($event)"
+                />
+              }
             </div>
           </ax-collapse>
         </ax-collapse-group>
       </div>
+
+      <ng-template #collapseHeaderTemplate>
+        <div class="ax-collapse-header-container">
+          <div class="ax-collapse-header-start">
+            <span class="ax-collapse-header-icon fa-light fa-map-marker-alt"></span>
+            <span>
+              @if (collapsibleHeaderLabel()) {
+                <span class="ax-font-semibold">{{ collapsibleHeaderLabel() }}</span>
+                @if (collapsibleHeaderAddress()) {
+                  <span> · {{ collapsibleHeaderAddress() }}</span>
+                }
+              } @else {
+                {{ collapsibleHeaderAddress() }}
+              }
+            </span>
+          </div>
+          <div class="ax-collapse-header-end">
+            <span
+              class="ax-icon ax-icon-chevron-left ax-collapse-arrow"
+              [class]="collapsibleCollapsed() ? '-rotation-90' : 'rotation-90'"
+            ></span>
+          </div>
+        </div>
+      </ng-template>
     } @else {
       <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max">
         <div class="ax-flex ax-items-center ax-gap-2 ax-col-span-12">
@@ -3629,6 +3855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             textField="name"
             [ngClass]="generateClasses('label')"
           >
+            <ax-validation-rule
+              rule="required"
+              message="{{ '@general:validation.messages.required' | translate | async }}"
+            ></ax-validation-rule>
           </ax-select-box>
         }
       </div>
@@ -3636,22 +3866,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <div class="ax-w-full">
         <ax-collapse-group look="fill">
           <ax-collapse
-            [caption]="collapsibleCaption()"
-            icon="fa-light fa-map-marker-alt"
+            [headerTemplate]="collapseHeaderTemplate"
             [showHeader]="true"
             [isCollapsed]="collapsibleCollapsed()"
             (isCollapsedChange)="collapsibleCollapsed.set($event)"
           >
             <div class="ax-pt-1">
-              <axp-layout-renderer
-                [layout]="addressFormLayout()"
-                [context]="collapsibleFormContext()"
-                (contextChange)="onCollapsibleFormContextChange($event)"
-              />
+              @for (formKey of [layoutRendererGeneration()]; track formKey) {
+                <axp-layout-renderer
+                  [layout]="addressFormLayout()"
+                  [context]="collapsibleFormContext()"
+                  (contextChange)="onCollapsibleFormContextChange($event)"
+                />
+              }
             </div>
           </ax-collapse>
         </ax-collapse-group>
       </div>
+
+      <ng-template #collapseHeaderTemplate>
+        <div class="ax-collapse-header-container">
+          <div class="ax-collapse-header-start">
+            <span class="ax-collapse-header-icon fa-light fa-map-marker-alt"></span>
+            <span>
+              @if (collapsibleHeaderLabel()) {
+                <span class="ax-font-semibold">{{ collapsibleHeaderLabel() }}</span>
+                @if (collapsibleHeaderAddress()) {
+                  <span> · {{ collapsibleHeaderAddress() }}</span>
+                }
+              } @else {
+                {{ collapsibleHeaderAddress() }}
+              }
+            </span>
+          </div>
+          <div class="ax-collapse-header-end">
+            <span
+              class="ax-icon ax-icon-chevron-left ax-collapse-arrow"
+              [class]="collapsibleCollapsed() ? '-rotation-90' : 'rotation-90'"
+            ></span>
+          </div>
+        </div>
+      </ng-template>
     } @else {
       <div class="ax-grid ax-grid-cols-12 ax-gap-4 ax-auto-cols-max">
         <div class="ax-flex ax-items-center ax-gap-2 ax-col-span-12">
@@ -7028,24 +7283,46 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     handleValueChange(e) {
         this.selectedItems.set(e.component.selectedItems);
         if (e.isUserInteraction) {
+            AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, 'select-box-widget', 'handleValueChange', () => ({
+                path: this.fullPath(),
+                value: e.value,
+                selectedItems: this.selectedItems(),
+                expose: this.expose(),
+                strategy: this.widgetsConfigs.selectValueStrategy,
+            }));
             //#region ----   Expose extra values to context   ----
+            const widgetPath = this.fullPath();
+            const savedWidgetValue = widgetPath ? this.contextService.getSavedValue(widgetPath) : undefined;
+            const selectionValue = this.filterMode() ? e.value : this.widgetsConfigs.selectValueStrategy === 'valueField'
+                ? e.value
+                : this.multiple()
+                    ? this.selectedItems()
+                    : this.selectedItems()[0];
+            const selectionMatchesSaved = this.contextService.isSavedCommitted() &&
+                widgetPath != null &&
+                isSelectionValueEqual(selectionValue, savedWidgetValue);
             if (this.expose()) {
-                const selections = this.selectedItems();
-                const exposeList = Array.isArray(this.expose()) ? this.expose() : [this.expose()];
-                const itemToExpose = {};
-                exposeList.forEach((expr) => {
-                    if (typeof expr === 'string') {
-                        const values = selections.map((item) => set({}, expr, get(item, expr)));
-                        setSmart(itemToExpose, expr, this.singleOrMultiple(values));
-                    }
-                    else if (expr && typeof expr === 'object') {
-                        const values = this.multiple()
-                            ? selections.map((item) => set({}, expr.source, get(item, expr.source)))
-                            : selections.map((item) => get(item, expr.source));
-                        setSmart(itemToExpose, expr.target, this.singleOrMultiple(values));
-                    }
-                });
-                this.contextService.applyObjectPaths(itemToExpose, { origin: 'user' });
+                if (selectionMatchesSaved) {
+                    this.syncExposePathsToSavedBaseline();
+                }
+                else {
+                    const selections = this.selectedItems();
+                    const exposeList = Array.isArray(this.expose()) ? this.expose() : [this.expose()];
+                    const itemToExpose = {};
+                    exposeList.forEach((expr) => {
+                        if (typeof expr === 'string') {
+                            const values = selections.map((item) => set({}, expr, get(item, expr)));
+                            setSmart(itemToExpose, expr, this.singleOrMultiple(values));
+                        }
+                        else if (expr && typeof expr === 'object') {
+                            const values = this.multiple()
+                                ? selections.map((item) => set({}, expr.source, get(item, expr.source)))
+                                : selections.map((item) => get(item, expr.source));
+                            setSmart(itemToExpose, expr.target, this.singleOrMultiple(values));
+                        }
+                    });
+                    this.contextService.applyObjectPaths(itemToExpose, { origin: 'user' });
+                }
             }
             //#endregion
             //#region ----   Set Value Based on Mode   ----
@@ -7069,9 +7346,32 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             else {
                 this.setValue(this.selectedItems()[0]);
             }
+            if (this.expose() && selectionMatchesSaved) {
+                this.syncExposePathsToSavedBaseline();
+            }
         }
         //#endregion
     }
+    /**
+     * When selection matches saved baseline, align expose targets (restore or remove paths absent from baseline).
+     */
+    syncExposePathsToSavedBaseline() {
+        const exposeValue = castArray(this.expose() ?? []);
+        const parentPaths = new Set();
+        exposeValue.forEach((item) => {
+            const target = typeof item === 'string' ? item : item.target;
+            if (target.includes('.')) {
+                parentPaths.add(target.split('.').slice(0, -1).join('.'));
+            }
+            this.contextService.syncPathToSavedBaseline(target, { origin: 'system' });
+        });
+        const saved = this.contextService.saved();
+        parentPaths.forEach((parentPath) => {
+            if (!has(saved, parentPath)) {
+                this.contextService.syncPathToSavedBaseline(parentPath, { origin: 'system' });
+            }
+        });
+    }
     handleSearchValueChange(e) {
         if (e.isUserInteraction) {
             this.searchValue.set(e.value);
@@ -7430,7 +7730,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent
         }), ...(ngDevMode ? [{ debugName: "samples" }] : /* istanbul ignore next */ []));
         this.ef = effect(() => {
             this.dataSource()
-                .onChanged.pipe(first())
+                .onChanged.pipe(first$1())
                 .subscribe((e) => {
                 if (e.items?.length > 0) {
                     this.displayItems.set(e.items);
@@ -9349,52 +9649,57 @@ class AXPAvatarWidgetDesignerComponent extends AXPValueWidgetComponent {
         this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
         this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : /* istanbul ignore next */ []));
         this.#effect1 = effect(async () => {
-            const value = this.getValue();
-            await untracked(async () => {
-                try {
-                    if (value) {
-                        this.setStatus(AXPWidgetStatus.Processing);
-                        const source = value.source;
-                        if (source) {
-                            switch (source.kind) {
-                                case 'url':
-                                    this.url.set(source.value);
-                                    break;
-                                case 'blob': {
-                                    const prev = this.blobUrl();
-                                    if (prev) {
-                                        URL.revokeObjectURL(prev);
+            this.getValue();
+            this.beginHydration();
+            try {
+                await untracked(async () => {
+                    try {
+                        const value = this.getValue();
+                        if (value) {
+                            const source = value.source;
+                            if (source) {
+                                switch (source.kind) {
+                                    case 'url':
+                                        this.url.set(source.value);
+                                        break;
+                                    case 'blob': {
+                                        const prev = this.blobUrl();
+                                        if (prev) {
+                                            URL.revokeObjectURL(prev);
+                                        }
+                                        const blob = source.value;
+                                        const next = URL.createObjectURL(blob);
+                                        this.blobUrl.set(next);
+                                        this.url.set(next);
+                                        break;
                                     }
-                                    const blob = source.value;
-                                    const next = URL.createObjectURL(blob);
-                                    this.blobUrl.set(next);
-                                    this.url.set(next);
-                                    break;
-                                }
-                                case 'fileId': {
-                                    const fileId = source.value;
-                                    const info = await this.fileStorage.getInfo(fileId);
-                                    this.url.set(info?.url ? info.url : null);
-                                    break;
+                                    case 'fileId': {
+                                        const fileId = source.value;
+                                        const info = await this.fileStorage.getInfo(fileId);
+                                        this.url.set(info?.url ? info.url : null);
+                                        break;
+                                    }
+                                    default:
+                                        this.url.set(null);
+                                        break;
                                 }
-                                default:
-                                    this.url.set(null);
-                                    break;
+                            }
+                            else {
+                                this.url.set(null);
                             }
                         }
                         else {
                             this.url.set(null);
                         }
                     }
-                    else {
-                        this.url.set(null);
+                    catch {
+                        this.setStatus(AXPWidgetStatus.Error);
                     }
-                    this.setStatus(AXPWidgetStatus.Rendered);
-                }
-                catch (error) {
-                    this.setStatus(AXPWidgetStatus.Error);
-                }
-            });
+                });
+            }
+            finally {
+                this.endHydration();
+            }
         }, ...(ngDevMode ? [{ debugName: "#effect1" }] : /* istanbul ignore next */ []));
     }
     #effect1;
@@ -9464,44 +9769,51 @@ class AXPAvatarWidgetEditComponent extends AXPValueWidgetComponent {
         this.isEmpty = computed(() => this.url() == null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : /* istanbul ignore next */ []));
         this.#effect1 = effect(async () => {
-            const fileId = this.getValue();
-            await untracked(async () => {
-                try {
-                    if (fileId) {
-                        this.setStatus(AXPWidgetStatus.Processing);
+            this.getValue();
+            this.beginHydration();
+            try {
+                await untracked(async () => {
+                    try {
                         const data = this.getValue();
-                        if (data?.source) {
-                            switch (data.source.kind) {
-                                case 'url':
-                                    this.url.set(data.source.value);
-                                    break;
-                                case 'blob': {
-                                    const blob = data.source.value;
-                                    this.blobUrl.set(URL.createObjectURL(blob));
-                                    this.url.set(this.blobUrl());
-                                    break;
-                                }
-                                case 'fileId': {
-                                    const fileId = data.source.value;
-                                    const info = await this.fileStorage.getInfo(fileId);
-                                    this.url.set(info?.url ? info.url : null);
-                                    break;
+                        if (data) {
+                            if (data?.source) {
+                                switch (data.source.kind) {
+                                    case 'url':
+                                        this.url.set(data.source.value);
+                                        break;
+                                    case 'blob': {
+                                        const blob = data.source.value;
+                                        this.blobUrl.set(URL.createObjectURL(blob));
+                                        this.url.set(this.blobUrl());
+                                        break;
+                                    }
+                                    case 'fileId': {
+                                        const fileId = data.source.value;
+                                        const info = await this.fileStorage.getInfo(fileId);
+                                        this.url.set(info?.url ? info.url : null);
+                                        break;
+                                    }
+                                    default:
+                                        this.url.set(null);
+                                        break;
                                 }
-                                default:
-                                    this.url.set(null);
-                                    break;
+                            }
+                            else {
+                                this.url.set(null);
                             }
                         }
                         else {
                             this.url.set(null);
                         }
                     }
-                    this.setStatus(AXPWidgetStatus.Rendered);
-                }
-                catch (error) {
-                    this.setStatus(AXPWidgetStatus.Error);
-                }
-            });
+                    catch {
+                        this.setStatus(AXPWidgetStatus.Error);
+                    }
+                });
+            }
+            finally {
+                this.endHydration();
+            }
         }, ...(ngDevMode ? [{ debugName: "#effect1" }] : /* istanbul ignore next */ []));
     }
     #effect1;
@@ -9641,52 +9953,57 @@ class AXPAvatarWidgetViewComponent extends AXPValueWidgetComponent {
         this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
         this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : /* istanbul ignore next */ []));
         this.#effect1 = effect(async () => {
-            const value = this.getValue();
-            await untracked(async () => {
-                try {
-                    if (value) {
-                        this.setStatus(AXPWidgetStatus.Processing);
-                        const source = value.source;
-                        if (source) {
-                            switch (source.kind) {
-                                case 'url':
-                                    this.url.set(source.value);
-                                    break;
-                                case 'blob': {
-                                    const prev = this.blobUrl();
-                                    if (prev) {
-                                        URL.revokeObjectURL(prev);
+            this.getValue();
+            this.beginHydration();
+            try {
+                await untracked(async () => {
+                    try {
+                        const value = this.getValue();
+                        if (value) {
+                            const source = value.source;
+                            if (source) {
+                                switch (source.kind) {
+                                    case 'url':
+                                        this.url.set(source.value);
+                                        break;
+                                    case 'blob': {
+                                        const prev = this.blobUrl();
+                                        if (prev) {
+                                            URL.revokeObjectURL(prev);
+                                        }
+                                        const blob = source.value;
+                                        const next = URL.createObjectURL(blob);
+                                        this.blobUrl.set(next);
+                                        this.url.set(next);
+                                        break;
                                     }
-                                    const blob = source.value;
-                                    const next = URL.createObjectURL(blob);
-                                    this.blobUrl.set(next);
-                                    this.url.set(next);
-                                    break;
-                                }
-                                case 'fileId': {
-                                    const fileId = source.value;
-                                    const info = await this.fileStorage.getInfo(fileId);
-                                    this.url.set(info?.url ? info.url : null);
-                                    break;
+                                    case 'fileId': {
+                                        const fileId = source.value;
+                                        const info = await this.fileStorage.getInfo(fileId);
+                                        this.url.set(info?.url ? info.url : null);
+                                        break;
+                                    }
+                                    default:
+                                        this.url.set(null);
+                                        break;
                                 }
-                                default:
-                                    this.url.set(null);
-                                    break;
+                            }
+                            else {
+                                this.url.set(null);
                             }
                         }
                         else {
                             this.url.set(null);
                         }
                     }
-                    else {
-                        this.url.set(null);
+                    catch {
+                        this.setStatus(AXPWidgetStatus.Error);
                     }
-                    this.setStatus(AXPWidgetStatus.Rendered);
-                }
-                catch (error) {
-                    this.setStatus(AXPWidgetStatus.Error);
-                }
-            });
+                });
+            }
+            finally {
+                this.endHydration();
+            }
         }, ...(ngDevMode ? [{ debugName: "#effect1" }] : /* istanbul ignore next */ []));
     }
     #effect1;
@@ -10214,7 +10531,7 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ax-dropdown-command-column>
       }
     </ax-data-table>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$c.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$c.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$c.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$c.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$c.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$c.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowColor", "rowColorField", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$c.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$c.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$c.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$c.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetViewComponent, decorators: [{
             type: Component,
@@ -11018,7 +11335,7 @@ class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
         </axp-state-message>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: "component", type: i2$1.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXMediaViewerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: "component", type: i2$1.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXMediaViewerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -12687,9 +13004,9 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled'] ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => this.options()['readonly'] ?? false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.#af = afterNextRender(() => {
-            this.setStatus(AXPWidgetStatus.Rendered);
+            this.endHydration();
         });
-        this.setStatus(AXPWidgetStatus.Processing);
+        this.beginHydration();
     }
     #af;
     get __class() {
@@ -12774,9 +13091,9 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled'] ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => this.options()['readonly'] ?? false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.#af = afterNextRender(() => {
-            this.setStatus(AXPWidgetStatus.Rendered);
+            this.endHydration();
         });
-        this.setStatus(AXPWidgetStatus.Processing);
+        this.beginHydration();
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMapWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -15588,8 +15905,6 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         //#endregion
         //#region ----   State Signals   ----
         this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : /* istanbul ignore next */ []));
-        /** True while syncing models from shared context (discard/load); writes use system origin. */
-        this.hydratingFromContext = signal(false, ...(ngDevMode ? [{ debugName: "hydratingFromContext" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Models   ----
         this.selectedItemIdModel = model('', ...(ngDevMode ? [{ debugName: "selectedItemIdModel" }] : /* istanbul ignore next */ []));
@@ -15643,29 +15958,28 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         }, ...(ngDevMode ? [{ debugName: "loadNamedDataSourceEffect" }] : /* istanbul ignore next */ []));
         this.syncValueToConfigurator = effect(() => {
             const value = this.getValue();
-            this.hydratingFromContext.set(true);
-            if (value && value.type) {
-                const sid = untracked(() => this.selectedItemIdModel());
-                const vals = untracked(() => this.valuesModel());
+            const sid = untracked(() => this.selectedItemIdModel());
+            const vals = untracked(() => this.valuesModel());
+            if (value?.type) {
                 const valueOpts = (value.options ?? {});
                 if (value.type !== sid || !isEqual(valueOpts, vals)) {
                     untracked(() => {
                         this.selectedItemIdModel.set(value.type);
-                        this.valuesModel.set(valueOpts);
+                        this.valuesModel.set(cloneDeep(valueOpts));
                         this.isInitialized.set(true);
                     });
                 }
+                return;
             }
-            else {
-                untracked(() => {
-                    if (!this.isInitialized()) {
-                        this.selectedItemIdModel.set('');
-                        this.valuesModel.set({});
-                        this.isInitialized.set(true);
-                    }
-                });
-            }
-            queueMicrotask(() => this.hydratingFromContext.set(false));
+            untracked(() => {
+                if (sid !== '' || !isEqual(vals, {})) {
+                    this.selectedItemIdModel.set('');
+                    this.valuesModel.set({});
+                }
+                if (!this.isInitialized()) {
+                    this.isInitialized.set(true);
+                }
+            });
         }, ...(ngDevMode ? [{ debugName: "syncValueToConfigurator" }] : /* istanbul ignore next */ []));
         this.syncConfiguratorToValue = effect(() => {
             const sid = this.selectedItemIdModel();
@@ -15674,26 +15988,34 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
                 return;
             }
             const currentValue = untracked(() => this.getValue());
-            const next = this.buildWidgetNode(sid, vals);
-            if (isEqual(next, currentValue)) {
+            if (!sid) {
+                if (!isFormValueEqual(null, currentValue)) {
+                    untracked(() => {
+                        this.setValue(null);
+                    });
+                }
                 return;
             }
-            untracked(() => {
-                this.setValue(next);
-            });
+            const next = this.buildWidgetNode(sid, vals);
+            if (!isFormValueEqual(next, currentValue)) {
+                untracked(() => {
+                    this.setValue(next);
+                });
+            }
         }, ...(ngDevMode ? [{ debugName: "syncConfiguratorToValue" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Utility Methods   ----
     buildWidgetNode(sid, vals) {
+        const emptyNode = { type: '', options: {} };
         if (!sid) {
-            return { type: '', options: {} };
+            return emptyNode;
         }
         const currentValue = untracked(() => this.getValue());
         return {
             ...(currentValue && typeof currentValue === 'object' ? currentValue : {}),
             type: sid,
-            options: vals,
+            options: cloneDeep(vals),
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -23307,12 +23629,14 @@ class AXPImageWidgetEditComponent extends AXPValueWidgetComponent {
                     color: 'danger',
                     disabled: !this.imageUrl(),
                     command: { name: 'delete-image' },
+                    shortcuts: ['delete'],
                 });
                 actions.custom({
                     title: '@general:actions.upload.title',
                     icon: 'fa-light fa-upload',
                     color: 'primary',
                     command: { name: 'upload-image' },
+                    shortcuts: ['ctrl+s', 'Enter'],
                 });
             });
         })
@@ -24587,7 +24911,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-D4MOHEpI.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-CZc2zFlg.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
             header: true,
@@ -24639,7 +24963,7 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPValueWidgetComponent {
         this.columns = this.options()['columns'];
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-view-popup.component-gX-3Kx9I.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-view-popup.component-XWRUVoL4.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -28074,7 +28398,7 @@ class AXPTriggersWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTriggersWidgetEditComponent, decorators: [{
             type: Component,
@@ -28201,12 +28525,24 @@ var triggersWidgetEditor_component = /*#__PURE__*/Object.freeze({
 
 class AXPTriggerExpressionEditorPopupComponent extends AXBasePageComponent {
     constructor() {
-        super(...arguments);
+        super();
         //#region ----   Inputs   ----
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Properties   ----
         this.currentValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        setupPopupFooterKeyboardShortcuts(() => [
+            {
+                title: '@general:actions.cancel.title',
+                command: 'cancel',
+                handler: () => this.handleCancelClick(),
+            },
+            {
+                title: '@general:actions.save.title',
+                command: 'submit',
+                handler: () => this.handleSaveClick(),
+            },
+        ], { id: 'trigger-expression-editor-popup' });
     }
     //#endregion
     //#region ----   Event Handlers   ----
@@ -28221,7 +28557,7 @@ class AXPTriggerExpressionEditorPopupComponent extends AXBasePageComponent {
             value: this.currentValue(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTriggerExpressionEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTriggerExpressionEditorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPTriggerExpressionEditorPopupComponent, isStandalone: true, selector: "axp-trigger-expression-editor-popup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
       <div class="ax-flex-1 ax-p-4 ax-overflow-hidden" style="direction: ltr;">
@@ -28288,7 +28624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXButtonModule, AXCodeEditorModule, AXDecoratorModule, AXTranslationModule],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 var triggerExpressionEditorPopup_component = /*#__PURE__*/Object.freeze({
     __proto__: null,