@acorex/platform 21.0.0-next.71 → 21.0.0-next.73

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, AXPRegionalSetting, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, AXPFileActionsService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
-import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, applyQueryArray, objectKeyValueTransforms } from '@acorex/platform/core';
+import { AXPDeviceService, setSmart, AXPColorPaletteService, extractValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPDataSourceDefinitionProviderService, sortByMultiLanguageString, 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,11 +31,11 @@ import * as i1$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
-import { set, get, castArray, isNil, isNull, isEmpty, isNumber, isEqual, cloneDeep } from 'lodash-es';
+import { set, get, castArray, isNil, isNull, isEmpty, isNumber, defaultTo, isEqual, cloneDeep } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPCommandService, provideQuerySetups } from '@acorex/platform/runtime';
-import { AXPConditionBuilderComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
+import { AXPConditionBuilderComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXColorUtil } from '@acorex/core/utils';
 import * as i2$3 from '@acorex/components/color-box';
@@ -114,6 +114,7 @@ import * as i1$j from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i6$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import * as i1$k from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
 import * as i3$6 from '@acorex/components/time-duration';
@@ -533,7 +534,7 @@ class AXPProviderSelectWidgetEditBase extends AXPDataListWidgetComponent {
             if (this.filterMode()) {
                 const newValue = e.value;
                 const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setUserValue({
+                this.setValue({
                     value: newValue,
                     displayText: text,
                     operation: {
@@ -543,10 +544,10 @@ class AXPProviderSelectWidgetEditBase extends AXPDataListWidgetComponent {
             }
             else if (this.multiple()) {
                 const keys = this.selectedItems().map((item) => get(item, this.valueField()));
-                this.setUserValue(keys);
+                this.setValue(keys);
             }
             else {
-                this.setUserValue(e.value);
+                this.setValue(e.value);
             }
         }
     }
@@ -3151,7 +3152,6 @@ const AXPAddressWidget = {
     },
 };
 
-//#region ----   Address Data Types   ----
 //#endregion
 
 //#region ----   Service   ----
@@ -4012,7 +4012,6 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             }
             return this.resolvedPresets().find((p) => p.id === id && p.kind === 'manual');
         }, ...(ngDevMode ? [{ debugName: "selectedManualPreset" }] : /* istanbul ignore next */ []));
-        this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         this.clearButton = computed(() => this.options()['clearButton'], ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
         this.minValue = computed(() => this.options()['minValue'], ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
         this.maxValue = computed(() => this.options()['maxValue'], ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
@@ -4045,10 +4044,6 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             }
             return undefined;
         }, ...(ngDevMode ? [{ debugName: "inputDepth" }] : /* istanbul ignore next */ []));
-        this.internalValue = computed(() => {
-            const values = Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()];
-            return values;
-        }, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
         this.filterValue = computed(() => {
             const value = this.getValue()?.value;
             if (typeof value === 'object' && value !== null) {
@@ -4149,25 +4144,11 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     //#endregion
     //#region ---- Standard Mode Handlers ----
-    handleValueChange(e, i) {
+    handleValueChange(e) {
         if (e.isUserInteraction) {
-            const newValues = this.internalValue().map((item, index) => (i === index ? e.value : item));
-            if (this.multiple()) {
-                this.setValue(newValues);
-            }
-            else {
-                this.setValue(newValues[0]);
-            }
+            this.setValue(e.value);
         }
     }
-    addItem() {
-        const newValues = [...this.internalValue(), ''];
-        this.setValue(newValues);
-    }
-    deleteItem(i) {
-        const newValues = this.internalValue().filter((_, index) => index !== i);
-        this.setValue(newValues);
-    }
     //#endregion
     //#region ---- Filter Mode Handlers ----
     handlePresetChange(e) {
@@ -4309,443 +4290,21 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (filterMode()) {
-      @if (filterUi() === 'simple') {
-        <div class="ax-flex ax-items-center ax-w-full">
-          @if (operation().type === 'between') {
-            <div class="ax-flex-1 ax-flex ax-gap-2">
-              <ax-datetime-box
-                #dateTimeBox
-                class="ax-w-full"
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterFromMinValue()"
-                [maxValue]="filterFromMaxValue()"
-                [placeholder]="'@general:terms.common.from' | translate | async"
-                [disabled]="isValuelessOperation()"
-                [ngModel]="filterRangeValue().from"
-                (onValueChanged)="handleFilterValueChange($event, 'from')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-              <ax-datetime-box
-                class="ax-w-full"
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterToMinValue()"
-                [maxValue]="filterToMaxValue()"
-                [placeholder]="'@general:terms.common.to' | translate | async"
-                [disabled]="isValuelessOperation()"
-                [ngModel]="filterRangeValue().to"
-                (onValueChanged)="handleFilterValueChange($event, 'to')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-            </div>
-          } @else {
-            <ax-datetime-box
-              #dateTimeBox
-              class="ax-flex-1"
-              [format]="calendarFormat()"
-              [picker]="format()"
-              [depth]="inputDepth()"
-              [placeholder]="(placeholder() | translate | async) ?? ''"
-              [disabled]="isValuelessOperation()"
-              [ngModel]="filterValue()"
-              (onValueChanged)="handleFilterValueChange($event, 'self')"
-            >
-              <ax-clear-button></ax-clear-button>
-              @for (validation of validationRules(); track $index) {
-                <ax-validation-rule
-                  [rule]="validation.rule"
-                  [message]="validation.options?.message"
-                  [options]="validation.options"
-                ></ax-validation-rule>
-              }
-            </ax-datetime-box>
-          }
-          <axp-filter-operations
-            type="datetime"
-            [operations]="filterOperations()"
-            [selectedOperation]="operation().type"
-            (selectedOperationChange)="handleOperationChange($event)"
-          ></axp-filter-operations>
-        </div>
-      } @else {
-        <div class="ax-flex ax-flex-col ax-items-center ax-w-full">
-          @if (resolvedPresets().length) {
-            <ax-select-box
-              #selectBox
-              class="ax-w-full"
-              [dataSource]="translatedPresets()"
-              [valueField]="'id'"
-              [textField]="'title'"
-              [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
-              [ngModel]="selectedPresetId()"
-              (onValueChanged)="handlePresetChange($event)"
-            >
-              <ax-clear-button></ax-clear-button>
-            </ax-select-box>
-          }
-          @if (selectedManualPreset()?.operationType === 'between') {
-            <div class="ax-flex ax-gap-2 ax-mt-2 ax-w-full">
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterFromMinValue()"
-                [maxValue]="filterFromMaxValue()"
-                [placeholder]="'@general:terms.common.from' | translate | async"
-                [ngModel]="filterRangeValue().from"
-                (onValueChanged)="handleFilterValueChange($event, 'from')"
-              >
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-                <ax-clear-button></ax-clear-button>
-              </ax-datetime-box>
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterToMinValue()"
-                [maxValue]="filterToMaxValue()"
-                [placeholder]="'@general:terms.common.to' | translate | async"
-                [ngModel]="filterRangeValue().to"
-                (onValueChanged)="handleFilterValueChange($event, 'to')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-            </div>
-          }
-          @if (
-            selectedManualPreset()?.operationType === 'greaterThan' ||
-            selectedManualPreset()?.operationType === 'lessThan'
-          ) {
-            <div class="ax-w-full ax-mt-2">
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [ngModel]="filterValue()"
-                (onValueChanged)="handleFilterValueChange($event, 'self')"
-              >
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-                <ax-clear-button></ax-clear-button>
-              </ax-datetime-box>
-            </div>
-          }
-        </div>
-      }
-    } @else {
-      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-        @for (datetime of internalValue(); track $index) {
-          <ax-datetime-box
-            class="ax-col-span-12"
-            [ngModel]="datetime"
-            [picker]="format()"
-            [depth]="inputDepth()"
-            (onValueChanged)="handleValueChange($event, $index)"
-            [minValue]="minValue()"
-            [maxValue]="maxValue()"
-            [disabled]="disabled()"
-            [readonly]="readonly()"
-            [format]="calendarFormat()"
-            [placeholder]="placeholder()"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            @if (clearButton()) {
-              <ax-clear-button></ax-clear-button>
-            }
-            @if (multiple()) {
-              <ax-suffix>
-                <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-                  <ax-icon class="far fa-trash"> </ax-icon>
-                </ax-button>
-              </ax-suffix>
-            }
-          </ax-datetime-box>
-        }
-        @if (multiple()) {
-          <ax-button
-            class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-            [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-            look="twotone"
-            (onClick)="addItem()"
-            [disabled]="disabled()"
-          ></ax-button>
-        }
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"ax-flex ax-items-center ax-w-full\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <ax-datetime-box\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"ax-flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"validation.options?.message\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-select-box\n          #selectBox\n          class=\"ax-w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-select-box>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"ax-w-full ax-mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validation.options?.message\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { 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: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-date-time-box-widget-edit',
-                    template: `
-    @if (filterMode()) {
-      @if (filterUi() === 'simple') {
-        <div class="ax-flex ax-items-center ax-w-full">
-          @if (operation().type === 'between') {
-            <div class="ax-flex-1 ax-flex ax-gap-2">
-              <ax-datetime-box
-                #dateTimeBox
-                class="ax-w-full"
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterFromMinValue()"
-                [maxValue]="filterFromMaxValue()"
-                [placeholder]="'@general:terms.common.from' | translate | async"
-                [disabled]="isValuelessOperation()"
-                [ngModel]="filterRangeValue().from"
-                (onValueChanged)="handleFilterValueChange($event, 'from')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-              <ax-datetime-box
-                class="ax-w-full"
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterToMinValue()"
-                [maxValue]="filterToMaxValue()"
-                [placeholder]="'@general:terms.common.to' | translate | async"
-                [disabled]="isValuelessOperation()"
-                [ngModel]="filterRangeValue().to"
-                (onValueChanged)="handleFilterValueChange($event, 'to')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-            </div>
-          } @else {
-            <ax-datetime-box
-              #dateTimeBox
-              class="ax-flex-1"
-              [format]="calendarFormat()"
-              [picker]="format()"
-              [depth]="inputDepth()"
-              [placeholder]="(placeholder() | translate | async) ?? ''"
-              [disabled]="isValuelessOperation()"
-              [ngModel]="filterValue()"
-              (onValueChanged)="handleFilterValueChange($event, 'self')"
-            >
-              <ax-clear-button></ax-clear-button>
-              @for (validation of validationRules(); track $index) {
-                <ax-validation-rule
-                  [rule]="validation.rule"
-                  [message]="validation.options?.message"
-                  [options]="validation.options"
-                ></ax-validation-rule>
-              }
-            </ax-datetime-box>
-          }
-          <axp-filter-operations
-            type="datetime"
-            [operations]="filterOperations()"
-            [selectedOperation]="operation().type"
-            (selectedOperationChange)="handleOperationChange($event)"
-          ></axp-filter-operations>
-        </div>
-      } @else {
-        <div class="ax-flex ax-flex-col ax-items-center ax-w-full">
-          @if (resolvedPresets().length) {
-            <ax-select-box
-              #selectBox
-              class="ax-w-full"
-              [dataSource]="translatedPresets()"
-              [valueField]="'id'"
-              [textField]="'title'"
-              [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
-              [ngModel]="selectedPresetId()"
-              (onValueChanged)="handlePresetChange($event)"
-            >
-              <ax-clear-button></ax-clear-button>
-            </ax-select-box>
-          }
-          @if (selectedManualPreset()?.operationType === 'between') {
-            <div class="ax-flex ax-gap-2 ax-mt-2 ax-w-full">
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterFromMinValue()"
-                [maxValue]="filterFromMaxValue()"
-                [placeholder]="'@general:terms.common.from' | translate | async"
-                [ngModel]="filterRangeValue().from"
-                (onValueChanged)="handleFilterValueChange($event, 'from')"
-              >
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-                <ax-clear-button></ax-clear-button>
-              </ax-datetime-box>
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [minValue]="filterToMinValue()"
-                [maxValue]="filterToMaxValue()"
-                [placeholder]="'@general:terms.common.to' | translate | async"
-                [ngModel]="filterRangeValue().to"
-                (onValueChanged)="handleFilterValueChange($event, 'to')"
-              >
-                <ax-clear-button></ax-clear-button>
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-              </ax-datetime-box>
-            </div>
-          }
-          @if (
-            selectedManualPreset()?.operationType === 'greaterThan' ||
-            selectedManualPreset()?.operationType === 'lessThan'
-          ) {
-            <div class="ax-w-full ax-mt-2">
-              <ax-datetime-box
-                [format]="calendarFormat()"
-                [picker]="format()"
-                [depth]="inputDepth()"
-                [ngModel]="filterValue()"
-                (onValueChanged)="handleFilterValueChange($event, 'self')"
-              >
-                @for (validation of validationRules(); track $index) {
-                  <ax-validation-rule
-                    [rule]="validation.rule"
-                    [message]="validation.options?.message"
-                    [options]="validation.options"
-                  ></ax-validation-rule>
-                }
-                <ax-clear-button></ax-clear-button>
-              </ax-datetime-box>
-            </div>
-          }
-        </div>
-      }
-    } @else {
-      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-        @for (datetime of internalValue(); track $index) {
-          <ax-datetime-box
-            class="ax-col-span-12"
-            [ngModel]="datetime"
-            [picker]="format()"
-            [depth]="inputDepth()"
-            (onValueChanged)="handleValueChange($event, $index)"
-            [minValue]="minValue()"
-            [maxValue]="maxValue()"
-            [disabled]="disabled()"
-            [readonly]="readonly()"
-            [format]="calendarFormat()"
-            [placeholder]="placeholder()"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            @if (clearButton()) {
-              <ax-clear-button></ax-clear-button>
-            }
-            @if (multiple()) {
-              <ax-suffix>
-                <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-                  <ax-icon class="far fa-trash"> </ax-icon>
-                </ax-button>
-              </ax-suffix>
-            }
-          </ax-datetime-box>
-        }
-        @if (multiple()) {
-          <ax-button
-            class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-            [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-            look="twotone"
-            (onClick)="addItem()"
-            [disabled]="disabled()"
-          ></ax-button>
-        }
-      </div>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
+            args: [{ selector: 'axp-date-time-box-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FormsModule,
                         AXFormModule,
                         AXValidationModule,
                         AXDateTimeBoxModule,
-                        AXButtonModule,
                         AXDecoratorModule,
                         AXSelectBoxModule,
                         AXTranslationModule,
                         AXPFilterOperationsComponent,
-                    ],
-                }]
+                    ], template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"ax-flex ax-items-center ax-w-full\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"ax-flex-1 ax-flex ax-gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <ax-datetime-box\n            class=\"ax-w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"ax-flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"validation.options?.message\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"ax-flex ax-flex-col ax-items-center ax-w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-select-box\n          #selectBox\n          class=\"ax-w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-select-box>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"ax-flex ax-gap-2 ax-mt-2 ax-w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"ax-w-full ax-mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track $index) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validation.options?.message\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validation.options?.message\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }], __class: [{
                 type: HostBinding,
                 args: ['class']
@@ -5157,7 +4716,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        this.multiLanguage = computed(() => this.options()['multiLanguage'], ...(ngDevMode ? [{ debugName: "multiLanguage" }] : /* istanbul ignore next */ []));
+        this.effectiveMultiLanguage = computed(() => shouldUseLocaleMapShape(!!this.options()['multiLanguage'], this.getValue(), this.fullPath() ? this.contextService.getSavedValue(this.fullPath()) : undefined), ...(ngDevMode ? [{ debugName: "effectiveMultiLanguage" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.clearButton = computed(() => this.options()['clearButton'] ?? true, ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -5170,26 +4729,17 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         });
         this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
     }
-    ngOnInit() {
-        super.ngOnInit();
-        const v = this.getValue();
-        if (this.multiLanguage() && typeof v === 'string') {
-            this.setValue({ [this.currentLanguage()]: v }, { origin: 'system' });
-        }
-    }
     handleValueChange(e) {
         if (!e.isUserInteraction) {
             return;
         }
-        if (this.multiLanguage()) {
-            const v = this.getValue();
-            const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
-            obj[this.currentLanguage()] = e.value ?? '';
-            this.setUserValue(obj);
-        }
-        else {
-            this.setUserValue(e.value ?? '');
-        }
+        const path = this.fullPath();
+        const current = this.getValue();
+        const saved = path ? this.contextService.getSavedValue(path) : undefined;
+        const nextValue = this.effectiveMultiLanguage()
+            ? buildLocaleTextMapValue(current, saved, this.currentLanguage(), e.value ?? '')
+            : (e.value ?? '');
+        this.setValue(nextValue);
     }
     openMultiLanguagePopup() {
         const node = {
@@ -5241,7 +4791,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
             ></ax-validation-rule>
           }
         </ax-text-area>
-        @if (multiLanguage()) {
+        @if (effectiveMultiLanguage()) {
           <ax-button
             look="blank"
             class="ax-absolute ax-sm ax-end-1 ax-bottom-1 ax-z-0 ax-opacity-50 hover:ax-opacity-100 hover:ax-z-10"
@@ -5283,7 +4833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             ></ax-validation-rule>
           }
         </ax-text-area>
-        @if (multiLanguage()) {
+        @if (effectiveMultiLanguage()) {
           <ax-button
             look="blank"
             class="ax-absolute ax-sm ax-end-1 ax-bottom-1 ax-z-0 ax-opacity-50 hover:ax-opacity-100 hover:ax-z-10"
@@ -5833,18 +5383,40 @@ const AXPNumberBoxWidget = {
     },
 };
 
+//#region ---- Password Text Direction ----
+/** Default text direction for password inputs (Latin passwords in RTL locales). */
+const PASSWORD_DEFAULT_TEXT_DIRECTION = 'ltr';
+/**
+ * Resolves password field text direction. Defaults to LTR unless explicitly overridden.
+ */
+function resolvePasswordTextDirection(options) {
+    const direction = options['direction'];
+    if (direction === 'ltr' || direction === 'rtl') {
+        return direction;
+    }
+    return PASSWORD_DEFAULT_TEXT_DIRECTION;
+}
+//#endregion
+
 class AXPPasswordBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         this.hasEyeIcon = this.options['hasEyeIcon'];
         this.showPassword = this.options['showPassword'];
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
         this.show = signal(!!this.rawValue, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     }
+    get hostDir() {
+        return this.textDirection();
+    }
+    get hostDirection() {
+        return this.textDirection();
+    }
     toggleEye() {
         this.show.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetColumnComponent, isStandalone: true, selector: "axp-password-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetColumnComponent, isStandalone: true, selector: "axp-password-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, host: { properties: { "attr.dir": "this.hostDir", "style.direction": "this.hostDirection" } }, usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
     <span>{{ show() ? rawValue : '*******' }}</span>
     @if (hasEyeIcon) {
       <span
@@ -5882,7 +5454,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     inputs: ['rawValue', 'rowData'],
                 }]
-        }] });
+        }], propDecorators: { hostDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostDirection: [{
+                type: HostBinding,
+                args: ['style.direction']
+            }] } });
 
 var passwordBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -5894,6 +5472,13 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options()), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
+    }
+    get hostDir() {
+        return this.textDirection();
+    }
+    get hostDirection() {
+        return this.textDirection();
     }
     get __class() {
         const cls = {};
@@ -5902,7 +5487,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "axp-password-box-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetEditComponent, isStandalone: true, selector: "axp-password-box-widget-edit", host: { properties: { "attr.dir": "this.hostDir", "style.direction": "this.hostDirection", "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <ax-password-box [ngModel]="getValue()" [disabled]="disabled()" (onValueChanged)="handleValueChanged($event)">
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
@@ -5938,7 +5523,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule, AXDecoratorModule, AXPasswordBoxModule, AXValidationModule, AXFormModule],
                 }]
-        }], propDecorators: { __class: [{
+        }], propDecorators: { hostDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostDirection: [{
+                type: HostBinding,
+                args: ['style.direction']
+            }], __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -5955,6 +5546,7 @@ class AXPPasswordBoxWidgetViewComponent extends AXPValueWidgetComponent {
         this.hasCopyIcon = computed(() => this.options()['hasCopyIcon'], ...(ngDevMode ? [{ debugName: "hasCopyIcon" }] : /* istanbul ignore next */ []));
         this.hasEyeIcon = computed(() => this.options()['hasEyeIcon'], ...(ngDevMode ? [{ debugName: "hasEyeIcon" }] : /* istanbul ignore next */ []));
         this.showPassword = computed(() => this.options()['showPassword'], ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        this.textDirection = computed(() => resolvePasswordTextDirection(this.options()), ...(ngDevMode ? [{ debugName: "textDirection" }] : /* istanbul ignore next */ []));
         this.show = signal(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
         this.clipboard = inject(AXPClipBoardService);
     }
@@ -5964,7 +5556,11 @@ class AXPPasswordBoxWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPPasswordBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPPasswordBoxWidgetViewComponent, isStandalone: true, selector: "axp-password-box-widget-view", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
-      <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+      <div
+        class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max"
+        [attr.dir]="textDirection()"
+        [style.direction]="textDirection()"
+      >
         <span>{{ show() ? internalValue() : '*******' }}</span>
         @if (hasEyeIcon()) {
           <span
@@ -5996,7 +5592,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-password-box-widget-view',
                     template: `
     <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
-      <div class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max">
+      <div
+        class="ax-flex ax-flex-1 ax-gap-3 ax-group ax-items-start ax-w-max"
+        [attr.dir]="textDirection()"
+        [style.direction]="textDirection()"
+      >
         <span>{{ show() ? internalValue() : '*******' }}</span>
         @if (hasEyeIcon()) {
           <span
@@ -6836,38 +6436,60 @@ var richTextWidgetColumn_component = /*#__PURE__*/Object.freeze({
 class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
+        this.translationService = inject(AXTranslationService);
+        this.wysiwygRef = viewChild('wysiwygRef', ...(ngDevMode ? [{ debugName: "wysiwygRef" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Computed Properties   ----
         this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.multiLanguage = computed(() => this.options()['multiLanguage'], ...(ngDevMode ? [{ debugName: "multiLanguage" }] : /* istanbul ignore next */ []));
+        this.effectiveMultiLanguage = computed(() => shouldUseLocaleMapShape(!!this.options()['multiLanguage'], this.getValue(), this.fullPath() ? this.contextService.getSavedValue(this.fullPath()) : undefined), ...(ngDevMode ? [{ debugName: "effectiveMultiLanguage" }] : /* istanbul ignore next */ []));
         this.minLineCount = computed(() => this.options()['minLineCount'] ?? this.options()['maxLineCount'] ?? 3, ...(ngDevMode ? [{ debugName: "minLineCount" }] : /* istanbul ignore next */ []));
         this.maxLineCount = computed(() => this.options()['maxLineCount'] ?? this.options()['minLineCount'] ?? 3, ...(ngDevMode ? [{ debugName: "maxLineCount" }] : /* istanbul ignore next */ []));
-        this.popupService = inject(AXPopupService);
-        this.translationService = inject(AXTranslationService);
+        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
         this.currentLanguage = toSignal(this.translationService.langChanges$, {
             initialValue: this.translationService.getActiveLang(),
         });
-        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Quill keeps its own DOM state; one-way ngModel does not refresh it on discard/apply.
+         * Re-sync when the context store reverts or replaces data from outside user edits.
+         */
+        this.#syncWysiwygFromContextEffect = effect(() => {
+            const changeState = this.contextService.changeEvent().state;
+            const text = this.getCurrentText();
+            const wysiwyg = this.wysiwygRef();
+            if (!this.shouldSyncWysiwygFromContext(changeState)) {
+                return;
+            }
+            untracked(() => {
+                void this.applyWysiwygContentWhenReady(wysiwyg, text);
+            });
+        }, ...(ngDevMode ? [{ debugName: "#syncWysiwygFromContextEffect" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Quill keeps its own DOM state; one-way ngModel does not refresh it on discard/apply.
+     * Re-sync when the context store reverts or replaces data from outside user edits.
+     */
+    #syncWysiwygFromContextEffect;
+    //#endregion
+    //#region ----   UI Handlers   ----
     onWysiwygChanged(e) {
         if (!e.isUserInteraction)
             return;
-        if (this.multiLanguage()) {
-            const v = this.getValue();
-            const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
-            obj[this.currentLanguage()] = e.value ?? '';
-            this.setValue(obj);
-        }
-        else {
-            this.setValue(e.value ?? '');
-        }
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        const v = this.getValue();
-        if (this.multiLanguage() && typeof v === 'string') {
-            this.setValue({ [this.currentLanguage()]: v });
-        }
+        const path = this.fullPath();
+        const current = this.getValue();
+        const saved = path ? this.contextService.getSavedValue(path) : undefined;
+        const lang = this.currentLanguage() ?? '';
+        const nextValue = this.effectiveMultiLanguage()
+            ? buildLocaleTextMapValue(current, saved, lang, e.value ?? '')
+            : (e.value ?? '');
+        this.setValue(nextValue);
     }
     async openMultiLanguagePopup() {
         const node = {
@@ -6893,8 +6515,30 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
             this.setValue({ ...map });
         }
     }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    shouldSyncWysiwygFromContext(state) {
+        return state === 'restored' || state === 'initiated';
+    }
+    async applyWysiwygContentWhenReady(wysiwyg, text) {
+        const content = defaultTo(text, '');
+        for (let attempt = 0; attempt < 30; attempt++) {
+            const editor = wysiwyg ?? this.wysiwygRef();
+            if (!editor) {
+                return;
+            }
+            try {
+                editor.setWysiwygContent(content);
+                return;
+            }
+            catch {
+                await new Promise((resolve) => setTimeout(resolve, 50));
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRichTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, viewQueries: [{ propertyName: "wysiwygRef", first: true, predicate: ["wysiwygRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
+    #wysiwygRef
     [placeHolder]="(placeholder() | translate | async)!"
     [disabled]="disabled()"
     [readonly]="readonly()"
@@ -6912,7 +6556,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-wysiwyg-list></ax-wysiwyg-list>
         <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
       </ax-prefix>
-      @if (multiLanguage()) {
+      @if (effectiveMultiLanguage()) {
         <ax-suffix>
           <ax-button class="ax-sm" (onClick)="openMultiLanguagePopup()" [disabled]="disabled()" look="blank">
             <ax-prefix>
@@ -6936,6 +6580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'axp-rich-text-widget-edit',
                     template: `<ax-wysiwyg-container
+    #wysiwygRef
     [placeHolder]="(placeholder() | translate | async)!"
     [disabled]="disabled()"
     [readonly]="readonly()"
@@ -6953,7 +6598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <ax-wysiwyg-list></ax-wysiwyg-list>
         <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
       </ax-prefix>
-      @if (multiLanguage()) {
+      @if (effectiveMultiLanguage()) {
         <ax-suffix>
           <ax-button class="ax-sm" (onClick)="openMultiLanguagePopup()" [disabled]="disabled()" look="blank">
             <ax-prefix>
@@ -6987,7 +6632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AsyncPipe,
                     ],
                 }]
-        }] });
+        }], propDecorators: { wysiwygRef: [{ type: i0.ViewChild, args: ['wysiwygRef', { isSignal: true }] }] } });
 
 var richTextWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -7303,9 +6948,6 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         this.hasSeenDataSource = false;
         //#region ----   Focus Management   ----
         this.shouldFocus = signal(false, ...(ngDevMode ? [{ debugName: "shouldFocus" }] : /* istanbul ignore next */ []));
-        this.eff = effect(() => {
-            console.log('filter', this.filter());
-        }, ...(ngDevMode ? [{ debugName: "eff" }] : /* istanbul ignore next */ []));
         this.#focusEffect = effect(() => {
             const shouldFocus = this.shouldFocus();
             if (!shouldFocus) {
@@ -7397,7 +7039,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             if (this.filterMode()) {
                 const newValue = e.value;
                 const text = this.selectedItems().map((item) => get(item, this.textField()));
-                this.setUserValue({
+                this.setValue({
                     value: newValue,
                     displayText: text,
                     operation: {
@@ -7406,26 +7048,13 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 });
             }
             else if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
-                this.setUserValue(e.value);
+                this.setValue(e.value);
             }
             else if (this.multiple()) {
-                this.setUserValue(this.selectedItems());
+                this.setValue(this.selectedItems());
             }
             else {
-                this.setUserValue(this.selectedItems()[0]);
-            }
-        }
-        else if (!this.filterMode()) {
-            // Programmatic sync from the select box (hydration, datasource refresh).
-            const systemOrigin = { origin: 'system' };
-            if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
-                this.setValue(e.value, systemOrigin);
-            }
-            else if (this.multiple()) {
-                this.setValue(this.selectedItems(), systemOrigin);
-            }
-            else {
-                this.setValue(this.selectedItems()[0], systemOrigin);
+                this.setValue(this.selectedItems()[0]);
             }
         }
         //#endregion
@@ -7863,16 +7492,32 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         this.look = computed(() => this.options()['look'] ?? 'solid', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
         this.showControl = computed(() => this.options()['showControl'] ?? true, ...(ngDevMode ? [{ debugName: "showControl" }] : /* istanbul ignore next */ []));
         this.imageMode = computed(() => this.options()['imageMode'] ?? false, ...(ngDevMode ? [{ debugName: "imageMode" }] : /* istanbul ignore next */ []));
+        this.imageField = computed(() => this.options()['imageField'] ?? this.textField(), ...(ngDevMode ? [{ debugName: "imageField" }] : /* istanbul ignore next */ []));
         this.displayItems = signal([], ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
-        this.ef = effect(() => {
-            this.dataSource()
-                .onChanged.pipe(first())
-                .subscribe((e) => {
-                this.displayItems.set(e.items);
+        this.ef = effect((onCleanup) => {
+            const rawDataSource = this.options()['dataSource'];
+            if (Array.isArray(rawDataSource) && rawDataSource.length > 0) {
+                this.displayItems.set(rawDataSource);
+            }
+            const ds = this.dataSource();
+            const sub = ds.onChanged.subscribe((e) => {
+                if (e.items?.length) {
+                    this.displayItems.set(e.items);
+                }
             });
-            this.dataSource().refresh();
+            onCleanup(() => sub.unsubscribe());
+            void ds.refresh();
         }, ...(ngDevMode ? [{ debugName: "ef" }] : /* istanbul ignore next */ []));
     }
+    resolveItemImage(item) {
+        const field = this.imageField();
+        const row = get(item, 'data', item);
+        return String(get(row, field, ''));
+    }
+    resolveItemAlt(item) {
+        const row = get(item, 'data', item);
+        return String(get(row, 'title', get(row, this.valueField(), '')));
+    }
     handleValueChange(e) {
         if (e.isUserInteraction) {
             this.setValue(e.value);
@@ -7903,7 +7548,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
     >
       <ng-template #imageTemplate let-item>
         @if (imageMode()) {
-          <img class="ax-w-14 ax-h-14" [src]="item.data[textField()]" />
+          <img class="ax-w-14 ax-h-14" [src]="resolveItemImage(item)" [attr.alt]="resolveItemAlt(item)" />
         }
       </ng-template>
       @for (validation of validationRules(); track $index) {
@@ -7938,7 +7583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     >
       <ng-template #imageTemplate let-item>
         @if (imageMode()) {
-          <img class="ax-w-14 ax-h-14" [src]="item.data[textField()]" />
+          <img class="ax-w-14 ax-h-14" [src]="resolveItemImage(item)" [attr.alt]="resolveItemAlt(item)" />
         }
       </ng-template>
       @for (validation of validationRules(); track $index) {
@@ -7967,6 +7612,10 @@ class AXPSelectionListWidgetViewComponent extends AXPDataListWidgetComponent {
     constructor() {
         super(...arguments);
         this.imageMode = computed(() => this.options()['imageMode'] ?? false, ...(ngDevMode ? [{ debugName: "imageMode" }] : /* istanbul ignore next */ []));
+        this.imageField = computed(() => this.options()['imageField'] ?? this.textField(), ...(ngDevMode ? [{ debugName: "imageField" }] : /* istanbul ignore next */ []));
+    }
+    resolveItemImage(item) {
+        return String(item[this.imageField()] ?? '');
     }
     get __class() {
         const cls = {};
@@ -7978,7 +7627,7 @@ class AXPSelectionListWidgetViewComponent extends AXPDataListWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSelectionListWidgetViewComponent, isStandalone: true, selector: "axp-selection-list-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of selectedItems(); track $index) {
       @if (imageMode()) {
-        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[textField()]" />
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="resolveItemImage(item)" [attr.alt]="item[textField()]" />
       } @else {
         <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[textField()]"></ax-badge>
       }
@@ -7994,7 +7643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @for (item of selectedItems(); track $index) {
       @if (imageMode()) {
-        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[textField()]" />
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="resolveItemImage(item)" [attr.alt]="item[textField()]" />
       } @else {
         <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[textField()]"></ax-badge>
       }
@@ -8956,7 +8605,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.popupService = inject(AXPopupService);
         this.translationService = inject(AXTranslationService);
-        this.multiLanguage = computed(() => this.options()['multiLanguage'], ...(ngDevMode ? [{ debugName: "multiLanguage" }] : /* istanbul ignore next */ []));
+        this.effectiveMultiLanguage = computed(() => shouldUseLocaleMapShape(!!this.options()['multiLanguage'], this.getValue(), this.fullPath() ? this.contextService.getSavedValue(this.fullPath()) : undefined), ...(ngDevMode ? [{ debugName: "effectiveMultiLanguage" }] : /* istanbul ignore next */ []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
@@ -8967,10 +8616,6 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        const v = this.getValue();
-        if (this.multiLanguage() && typeof v === 'string') {
-            this.setValue({ [this.currentLanguage()]: v }, { origin: 'system' });
-        }
         this.translationService.langChanges$.subscribe((i) => {
             this.currentLanguage.set(i);
         });
@@ -8979,15 +8624,13 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         if (!e.isUserInteraction) {
             return;
         }
-        if (this.multiLanguage()) {
-            const v = this.getValue();
-            const obj = v && typeof v === 'object' && !Array.isArray(v) ? { ...v } : {};
-            obj[this.currentLanguage()] = e.value ?? '';
-            this.setUserValue(obj);
-        }
-        else {
-            this.setUserValue(e.value ?? '');
-        }
+        const path = this.fullPath();
+        const current = this.getValue();
+        const saved = path ? this.contextService.getSavedValue(path) : undefined;
+        const nextValue = this.effectiveMultiLanguage()
+            ? buildLocaleTextMapValue(current, saved, this.currentLanguage(), e.value ?? '')
+            : (e.value ?? '');
+        this.setValue(nextValue);
     }
     getCurrentText() {
         return this.translationService.resolve(this.getValue(), this.currentLanguage());
@@ -9045,7 +8688,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         @if (hasClearButton()) {
           <ax-clear-button></ax-clear-button>
         }
-        @if (multiLanguage()) {
+        @if (effectiveMultiLanguage()) {
           <ax-suffix>
             <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()" look="blank">
               <ax-prefix>
@@ -9085,7 +8728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         @if (hasClearButton()) {
           <ax-clear-button></ax-clear-button>
         }
-        @if (multiLanguage()) {
+        @if (effectiveMultiLanguage()) {
           <ax-suffix>
             <ax-button (onClick)="openMultiLanguagePopup()" [disabled]="disabled()" look="blank">
               <ax-prefix>
@@ -10558,7 +10201,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", "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", "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", "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,
@@ -12367,29 +12010,63 @@ var mapWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPMapWidgetViewComponent: AXPMapWidgetViewComponent
 });
 
-//#region ----   Component: QR Code Widget Column   ----
-class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
+//#region ---- QR code print utility ----
+/**
+ * Opens the system print dialog for the QR code SVG inside the given container.
+ */
+function printQrcodeFromElement(container, size) {
+    const svg = container.querySelector('svg');
+    if (!svg) {
+        return;
+    }
+    const printWindow = window.open('', '_blank', 'noopener,noreferrer');
+    if (!printWindow) {
+        return;
+    }
+    const svgMarkup = svg.outerHTML;
+    printWindow.document.write(`<!DOCTYPE html>
+<html>
+  <head>
+    <title>QR Code</title>
+    <style>
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        margin: 0;
+      }
+      svg {
+        width: ${size}px;
+        height: ${size}px;
+      }
+    </style>
+  </head>
+  <body>${svgMarkup}</body>
+</html>`);
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+    printWindow.close();
+}
+//#endregion
+
+//#region ---- Types ----
+const QRCODE_WIDGET_NAME = 'qrcode';
+//#endregion
+//#region ---- QR code viewer service ----
+/**
+ * Opens a read-only QR code preview dialog with print and cancel actions.
+ */
+class AXPQrcodeViewerService {
     constructor() {
-        super(...arguments);
-        //#region ----   Services & Dependencies   ----
+        //#region ---- Services & Dependencies ----
         this.layoutBuilder = inject(AXPLayoutBuilderService);
-        //#endregion
-        //#region ----   Computed Properties   ----
-        this.size = computed(() => this.options?.size ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.level = computed(() => {
-            const opt = this.options?.level;
-            return typeof opt === 'string' ? opt : (opt?.id ?? 'M');
-        }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-        this.color = computed(() => {
-            const opt = this.options?.color;
-            return AXColorUtil.colorStringToHex(opt ?? '#000000');
-        }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-        this.outputType = computed(() => this.options?.outputType ?? 'svg', ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
     }
     //#endregion
-    //#region ----   UI Handlers   ----
-    async showPopup() {
-        const contentValue = this.rawValue;
+    //#region ---- Public API ----
+    async open(options) {
+        const contentValue = options.content;
         if (!contentValue) {
             return;
         }
@@ -12397,26 +12074,76 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle('QR Code')
+                .setTitle(options.title ?? '@platform-layout-widgets:widgets.qrcode.title')
                 .setSize('md')
+                .setCloseButton(true)
                 .setContext({ qr: contentValue })
                 .content((content) => {
-                content.setDirection('column').setGap('24px').setAlignItems('center').customWidget('qrcode', {
+                content.setDirection('column').setGap('24px').setAlignItems('center').customWidget(QRCODE_WIDGET_NAME, {
+                    name: QRCODE_WIDGET_NAME,
                     path: 'qr',
-                    size: this.size(),
-                    level: this.level(),
-                    color: this.color(),
+                    size: options.size ?? 200,
+                    level: options.level ?? 'M',
+                    color: options.color ?? '#000000',
                     readonly: true,
-                    outputType: this.outputType(),
+                    outputType: options.outputType ?? 'svg',
                 });
             })
                 .setActions((actions) => {
+                actions.custom({
+                    title: '@general:actions.print.title',
+                    icon: 'fa-light fa-print',
+                    command: { name: `widget:${QRCODE_WIDGET_NAME}.print` },
+                    position: 'suffix',
+                });
                 actions.cancel('@general:actions.cancel.title');
             });
         })
             .show();
         ref.close();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeViewerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ---- Component: QR Code Widget Column ----
+class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ---- Services & Dependencies ----
+        this.qrcodeViewer = inject(AXPQrcodeViewerService);
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.size = computed(() => this.options?.size ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.level = computed(() => {
+            const opt = this.options?.level;
+            return typeof opt === 'string' ? opt : (opt?.id ?? 'M');
+        }, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+        this.color = computed(() => {
+            const opt = this.options?.color;
+            return AXColorUtil.colorStringToHex(opt ?? '#000000');
+        }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.outputType = computed(() => this.options?.outputType ?? 'svg', ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    async showPopup() {
+        const contentValue = this.rawValue;
+        if (!contentValue) {
+            return;
+        }
+        await this.qrcodeViewer.open({
+            content: contentValue,
+            size: this.size(),
+            level: this.level(),
+            color: this.color(),
+            outputType: this.outputType(),
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetColumnComponent, isStandalone: true, selector: "axp-qrcode-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-items-center ax-gap-2">
@@ -12606,22 +12333,49 @@ var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ---- View Children ----
+        this.qrContainer = viewChild('qrContainer', ...(ngDevMode ? [{ debugName: "qrContainer" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed Properties ----
         this.size = computed(() => this.options()['size'] ?? 200, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.level = computed(() => this.options()['level']?.id ?? 'M', ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
         this.color = computed(() => AXColorUtil.colorStringToHex(this.options()['color'] ?? '#000000'), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.outputType = computed(() => this.options()['outputType'] ?? 'svg', ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ---- Host Bindings ----
     get __class() {
         const cls = {};
-        cls[`ax-inline-block`] = true;
-        return cls;
+        cls['ax-inline-block'] = true;
+        return Object.keys(cls)
+            .filter((key) => cls[key])
+            .join(' ');
+    }
+    //#endregion
+    //#region ---- Widget API ----
+    api() {
+        return {
+            print: () => {
+                const container = this.qrContainer()?.nativeElement;
+                if (container) {
+                    printQrcodeFromElement(container, this.size());
+                }
+            },
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    {{ getValue() }}
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "qrContainer", first: true, predicate: ["qrContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (getValue()) {
-      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
-      </ax-qrcode>
+      <div #qrContainer class="ax-inline-block">
+        <ax-qrcode
+          [content]="getValue()"
+          [size]="size()"
+          [color]="color()"
+          [level]="level()"
+          [outputType]="outputType()"
+        >
+        </ax-qrcode>
+      </div>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$3.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -12630,16 +12384,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'axp-qrcode-widget',
                     template: `
-    {{ getValue() }}
     @if (getValue()) {
-      <ax-qrcode [content]="getValue()" [size]="size()" [color]="color()" [level]="level()" [outputType]="outputType()">
-      </ax-qrcode>
+      <div #qrContainer class="ax-inline-block">
+        <ax-qrcode
+          [content]="getValue()"
+          [size]="size()"
+          [color]="color()"
+          [level]="level()"
+          [outputType]="outputType()"
+        >
+        </ax-qrcode>
+      </div>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXQrcodeModule],
                 }]
-        }], propDecorators: { __class: [{
+        }], propDecorators: { qrContainer: [{ type: i0.ViewChild, args: ['qrContainer', { isSignal: true }] }], __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -13006,7 +12767,7 @@ class AXPSignatureWidgetColumnComponent extends AXPColumnWidgetComponent {
             .create()
             .dialog((dialog) => {
             dialog
-                .setTitle('Signature')
+                .setTitle('@platform-layout-widgets:widgets.signature.title')
                 .setSize('lg')
                 .content((layoutBuilder) => {
                 layoutBuilder.flex((flex) => {
@@ -13078,17 +12839,43 @@ var signaturePadWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPSignatureWidgetColumnComponent: AXPSignatureWidgetColumnComponent
 });
 
+//#region ---- Component: Signature Pad Widget Edit ----
 class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ---- Options & State ----
         this.disabled = computed(() => this.options()['disabled'] ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /** When true (default), show click overlay and use read-only paint; when false (e.g. inside dialog), no overlay and paint is editable. */
+        /** When true (default), show click-to-edit overlay over read-only paint. Set false when used inside a dialog. */
         this.showOverlay = computed(() => this.options()['showOverlay'] ?? true, ...(ngDevMode ? [{ debugName: "showOverlay" }] : /* istanbul ignore next */ []));
-        /** Edit mode: true when inside dialog (no overlay), false when outside (read-only preview with overlay). */
+        /** Paint editMode: true hides pen/highlighter/eraser toolbars. */
         this.editMode = computed(() => this.options()['editMode'] ?? true, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+        this.hasSignature = computed(() => {
+            const value = this.getValue();
+            return typeof value === 'string' && value.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasSignature" }] : /* istanbul ignore next */ []));
+        this.showSignaturePreview = computed(() => this.showOverlay() && this.hasSignature(), ...(ngDevMode ? [{ debugName: "showSignaturePreview" }] : /* istanbul ignore next */ []));
+        this.showPaintSurface = computed(() => !this.showOverlay(), ...(ngDevMode ? [{ debugName: "showPaintSurface" }] : /* istanbul ignore next */ []));
+        this.isInteracting = signal(false, ...(ngDevMode ? [{ debugName: "isInteracting" }] : /* istanbul ignore next */ []));
+        this.showEmptyHint = computed(() => this.showOverlay() && !this.hasSignature(), ...(ngDevMode ? [{ debugName: "showEmptyHint" }] : /* istanbul ignore next */ []));
+        this.showDialogHint = computed(() => !this.showOverlay() && !this.hasSignature() && !this.isInteracting(), ...(ngDevMode ? [{ debugName: "showDialogHint" }] : /* istanbul ignore next */ []));
+        this.showDesktopHover = computed(() => this.showOverlay() && !this.deviceService.isTouchScreen() && !this.disabled(), ...(ngDevMode ? [{ debugName: "showDesktopHover" }] : /* istanbul ignore next */ []));
+        this.hovering = signal(false, ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
+        this.emptyHint = computed(() => {
+            const placeholder = this.options()['placeholder']?.trim();
+            return placeholder || '@platform-layout-widgets:widgets.signature.empty-state.hint';
+        }, ...(ngDevMode ? [{ debugName: "emptyHint" }] : /* istanbul ignore next */ []));
+        this.signHereHint = computed(() => {
+            const placeholder = this.options()['placeholder']?.trim();
+            return placeholder || '@platform-layout-widgets:widgets.signature.empty-state.sign-here';
+        }, ...(ngDevMode ? [{ debugName: "signHereHint" }] : /* istanbul ignore next */ []));
         this.paintContainer = viewChild('paintContainer', ...(ngDevMode ? [{ debugName: "paintContainer" }] : /* istanbul ignore next */ []));
         this.paintView = viewChild('paintView', ...(ngDevMode ? [{ debugName: "paintView" }] : /* istanbul ignore next */ []));
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        //#endregion
+        //#region ---- Services & Dependencies ----
+        this.signatureEditorService = inject(AXPSignatureEditorService);
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ---- Effects ----
         this.#loadInitialImageEffect = effect(() => {
             const view = this.paintView();
             const container = this.paintContainer();
@@ -13098,141 +12885,92 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
             }
             else if (container && value == null) {
                 container.clear();
+                this.isInteracting.set(false);
             }
         }, ...(ngDevMode ? [{ debugName: "#loadInitialImageEffect" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             this.paintContainer()?.setPenWidth(5);
         });
     }
+    //#endregion
+    //#region ---- Effects ----
     #loadInitialImageEffect;
     #init;
-    async openEditor() {
+    //#endregion
+    //#region ---- Widget API ----
+    api() {
+        return {
+            clear: () => {
+                this.clearSignaturePad();
+            },
+        };
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    clearSignaturePad() {
+        this.setValue(null);
+        this.paintContainer()?.clear();
+        this.isInteracting.set(false);
+    }
+    handleMouseEnter() {
+        if (!this.showDesktopHover()) {
+            return;
+        }
+        this.hovering.set(true);
+    }
+    handleMouseLeave() {
+        if (!this.showDesktopHover()) {
+            return;
+        }
+        this.hovering.set(false);
+    }
+    handleSurfaceClick(event) {
+        const target = event.target;
+        if (target?.closest('[data-signature-action]')) {
+            return;
+        }
+        if (!this.showOverlay() || this.disabled()) {
+            return;
+        }
+        event.stopPropagation();
+        void this.openEditor();
+    }
+    handleOverlayClick(event) {
+        event.stopPropagation();
         if (this.disabled()) {
             return;
         }
-        const ref = await this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('Signature')
-                .setSize('sm')
-                .setCloseButton(true)
-                .setContext({ value: this.getValue() })
-                .content((content) => {
-                content.setDirection('column').setGap('16px').setAlignItems('stretch').customWidget('signature', {
-                    path: 'value',
-                    disabled: this.disabled(),
-                    showOverlay: false,
-                });
-            })
-                .setActions((actions) => {
-                actions.custom({
-                    title: '@general:actions.download.title',
-                    icon: 'fa-light fa-download',
-                    color: 'primary',
-                    disabled: false,
-                    command: { name: 'signature-download' },
-                    position: 'prefix',
-                });
-                actions.custom({
-                    title: '@general:actions.delete.title',
-                    icon: 'fa-light fa-trash-can',
-                    color: 'danger',
-                    disabled: false,
-                    command: { name: 'signature-clear' },
-                });
-                actions.custom({
-                    title: '@general:actions.apply.title',
-                    icon: 'fa-light fa-check',
-                    color: 'primary',
-                    disabled: false,
-                    command: { name: 'signature-apply' },
-                });
-            });
-        })
-            .show();
-        const action = ref.action();
-        const context = ref.context() ?? {};
-        if (action === 'signature-clear') {
-            ref.close();
-            this.setValue(null);
+        void this.openEditor();
+    }
+    handleSurfacePointerDown(event) {
+        if (this.showOverlay() || this.disabled()) {
             return;
         }
-        if (action === 'signature-download') {
-            const dataUrl = context.value;
-            if (typeof dataUrl === 'string') {
-                const link = document.createElement('a');
-                link.href = dataUrl;
-                link.target = '_blank';
-                link.download = 'signature.png';
-                link.click();
-            }
+        const target = event.target;
+        if (target.closest('.ax-canvas-element')) {
+            this.isInteracting.set(true);
         }
-        else if (action === 'signature-apply') {
-            const newValue = context.value;
-            if (typeof newValue === 'string' || newValue === null) {
-                this.setValue(newValue);
-            }
+    }
+    async openEditor() {
+        if (this.disabled()) {
+            return;
+        }
+        const result = await this.signatureEditorService.open({
+            value: this.getValue(),
+            disabled: this.disabled(),
+        });
+        if (result.action === 'apply') {
+            this.setValue(result.value);
         }
-        ref.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-relative">
-      @if (showOverlay()) {
-        <div
-          (click)="openEditor()"
-          class="ax-transition-all ax-absolute ax-z-10 ax-inset-0 hover:ax-bg-black/50 ax-flex ax-items-center ax-justify-center ax-cursor-pointer"
-        >
-          <i
-            class="ax-w-full ax-h-full ax-flex ax-justify-center ax-items-center fa-solid fa-pencil ax-text-transparent hover:ax-text-white"
-          ></i>
-        </div>
-      }
-      <ax-paint-container
-        [editMode]="editMode()"
-        [disabled]="disabled()"
-        [ngModel]="getValue()"
-        (ngModelChange)="setValue($event)"
-        class="ax-h-full ax-max-w-[20rem]"
-        #paintContainer
-      >
-        <ax-paint-view #paintView paintBackgroundColor="white"></ax-paint-view>
-      </ax-paint-container>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXImageModule }, { 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: "ngmodule", type: AXPaintModule }, { kind: "component", type: i2$8.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$8.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["class", "paintBackgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "ax-block ax-w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit ax-block ax-w-full ax-select-none\">\n  <div\n    class=\"ax-relative ax-w-full ax-min-h-[9rem] ax-overflow-hidden ax-rounded-md\"\n    [class.ax-cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.ax-cursor-not-allowed]=\"disabled()\"\n    [class.ax-opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image [src]=\"getValue()!\" class=\"ax-block ax-w-full ax-min-h-[9rem] ax-object-contain\" />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature ax-text-2xl\"></i>\n        <span class=\"ax-text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-items-center ax-justify-center ax-pointer-events-none ax-text-sm ax-opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-20 ax-flex ax-cursor-pointer ax-items-center ax-justify-center ax-bg-neutral-900/50 ax-text-neutral-100 ax-transition-opacity ax-duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .ax-main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .ax-secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.ax-editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .ax-canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n"], dependencies: [{ 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: "ngmodule", type: AXPaintModule }, { kind: "component", type: i2$8.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$8.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["class", "paintBackgroundColor"] }, { 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: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-signature-pad-widget-edit',
-                    template: `
-    <div class="ax-relative">
-      @if (showOverlay()) {
-        <div
-          (click)="openEditor()"
-          class="ax-transition-all ax-absolute ax-z-10 ax-inset-0 hover:ax-bg-black/50 ax-flex ax-items-center ax-justify-center ax-cursor-pointer"
-        >
-          <i
-            class="ax-w-full ax-h-full ax-flex ax-justify-center ax-items-center fa-solid fa-pencil ax-text-transparent hover:ax-text-white"
-          ></i>
-        </div>
-      }
-      <ax-paint-container
-        [editMode]="editMode()"
-        [disabled]="disabled()"
-        [ngModel]="getValue()"
-        (ngModelChange)="setValue($event)"
-        class="ax-h-full ax-max-w-[20rem]"
-        #paintContainer
-      >
-        <ax-paint-view #paintView paintBackgroundColor="white"></ax-paint-view>
-      </ax-paint-container>
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXButtonModule, AXDecoratorModule, AXImageModule, FormsModule, AXPaintModule],
-                }]
+            args: [{ selector: 'axp-signature-pad-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ax-block ax-w-full',
+                    }, imports: [FormsModule, AXPaintModule, AXImageModule, AXTranslationModule, AsyncPipe], template: "<div class=\"axp-signature-pad-widget-edit ax-block ax-w-full ax-select-none\">\n  <div\n    class=\"ax-relative ax-w-full ax-min-h-[9rem] ax-overflow-hidden ax-rounded-md\"\n    [class.ax-cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.ax-cursor-not-allowed]=\"disabled()\"\n    [class.ax-opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image [src]=\"getValue()!\" class=\"ax-block ax-w-full ax-min-h-[9rem] ax-object-contain\" />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature ax-text-2xl\"></i>\n        <span class=\"ax-text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-10 ax-flex ax-items-center ax-justify-center ax-pointer-events-none ax-text-sm ax-opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"ax-absolute ax-inset-0 ax-z-20 ax-flex ax-cursor-pointer ax-items-center ax-justify-center ax-bg-neutral-900/50 ax-text-neutral-100 ax-transition-opacity ax-duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .ax-main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .ax-secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.ax-editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .ax-canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n"] }]
         }], propDecorators: { paintContainer: [{ type: i0.ViewChild, args: ['paintContainer', { isSignal: true }] }], paintView: [{ type: i0.ViewChild, args: ['paintView', { isSignal: true }] }] } });
 
 var signaturePadWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -15037,8 +14775,6 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         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 */ []));
-        this.baseline = signal(null, ...(ngDevMode ? [{ debugName: "baseline" }] : /* istanbul ignore next */ []));
-        this.isDirtySignal = signal(false, ...(ngDevMode ? [{ debugName: "isDirtySignal" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Models   ----
         this.selectedItemIdModel = model('', ...(ngDevMode ? [{ debugName: "selectedItemIdModel" }] : /* istanbul ignore next */ []));
@@ -15114,7 +14850,6 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
                     }
                 });
             }
-            untracked(() => this.syncBaselineFromModels());
             queueMicrotask(() => this.hydratingFromContext.set(false));
         }, ...(ngDevMode ? [{ debugName: "syncValueToConfigurator" }] : /* istanbul ignore next */ []));
         this.syncConfiguratorToValue = effect(() => {
@@ -15128,32 +14863,10 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
             if (isEqual(next, currentValue)) {
                 return;
             }
-            const origin = this.hydratingFromContext() ? 'system' : 'user';
             untracked(() => {
-                this.setValue(next, { origin });
+                this.setValue(next);
             });
         }, ...(ngDevMode ? [{ debugName: "syncConfiguratorToValue" }] : /* istanbul ignore next */ []));
-        this.evaluateDirty = effect(() => {
-            if (!this.isInitialized()) {
-                return;
-            }
-            const base = this.baseline();
-            if (base == null) {
-                return;
-            }
-            const sid = this.selectedItemIdModel();
-            const vals = this.valuesModel();
-            const current = this.buildWidgetNode(sid, vals);
-            const dirty = !isEqual(current, base);
-            this.setDirtyState(dirty);
-        }, ...(ngDevMode ? [{ debugName: "evaluateDirty" }] : /* istanbul ignore next */ []));
-    }
-    //#endregion
-    //#region ----   Widget API   ----
-    api() {
-        return {
-            isDirty: () => this.isDirtySignal(),
-        };
     }
     //#endregion
     //#region ----   Utility Methods   ----
@@ -15168,22 +14881,6 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
             options: vals,
         };
     }
-    syncBaselineFromModels() {
-        if (!this.isInitialized()) {
-            return;
-        }
-        const sid = this.selectedItemIdModel();
-        const vals = this.valuesModel();
-        this.baseline.set(cloneDeep(this.buildWidgetNode(sid, vals)));
-        this.setDirtyState(false);
-    }
-    setDirtyState(dirty) {
-        if (this.isDirtySignal() === dirty) {
-            return;
-        }
-        this.isDirtySignal.set(dirty);
-        this.layoutService.notifyWidgetDirtyChanged();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPItemConfiguratorWidgetEditComponent, isStandalone: true, selector: "axp-item-configurator-widget-edit", inputs: { selectedItemIdModel: { classPropertyName: "selectedItemIdModel", publicName: "selectedItemIdModel", isSignal: true, isRequired: false, transformFunction: null }, valuesModel: { classPropertyName: "valuesModel", publicName: "valuesModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemIdModel: "selectedItemIdModelChange", valuesModel: "valuesModelChange" }, usesInheritance: true, ngImport: i0, template: `
     @if (isInitialized()) {
@@ -21007,6 +20704,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.ngZone = inject(NgZone);
+        this.toggleShortcutKeys = chordToKbdItemKeys('ctrl+b');
         this.isDragging = false;
         this.calculatedValues = signal(cloneDeep(AXP_default_Spacing_Box_Value), ...(ngDevMode ? [{ debugName: "calculatedValues" }] : /* istanbul ignore next */ []));
         this.originalValues = signal(cloneDeep(AXP_default_Spacing_Box_Value), ...(ngDevMode ? [{ debugName: "originalValues" }] : /* istanbul ignore next */ []));
@@ -21186,7 +20884,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { 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: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <ax-kbd class=\"look-text\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { 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: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -21199,9 +20897,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXRangeSliderModule,
                         AXButtonModule,
                         AXDropdownButtonModule,
+                        AXKBDComponent,
+                        AXKBDItemComponent,
                         AXNumberBoxModule,
                         AXDecoratorModule,
-                    ], template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
+                    ], template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <ax-kbd class=\"look-text\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }] } });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -24068,7 +23768,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-BcpRkpJp.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.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,
@@ -24120,7 +23820,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-DQtK4lxl.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-layout-widgets-tabular-data-view-popup.component-gX-3Kx9I.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -28425,5 +28125,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent };
+export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, matchesWidgetAiAgent, printQrcodeFromElement };
 //# sourceMappingURL=acorex-platform-layout-widgets.mjs.map