@acorex-platform/framework-client 2.0.0-next.3 → 2.0.0-next.31

package/fesm2022/{acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-1UJh0Qj4.mjs → acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-CpmGqDUE.mjs}

@@ -1,5 +1,5 @@
 import * as i1$4 from '@acorex-platform/framework-client/layout/widget-core';
-import { AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXP_NAME_PROPERTY, AXP_DISABLED_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_TEXT_PROPERTY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_DATA_PATH_PROPERTY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_LABEL_PROPERTY, AXP_READONLY_PROPERTY, AXP_TRIGGERS_PROPERTY, booleanDefaultProperty, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_PLACEHOLDER_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_DATA_PROPERTY_GROUP, AXP_HAS_LABEL_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXPColumnTruncatedTextComponent, AXP_MULTI_LANGUAGE_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, largeTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, numberDefaultProperty, numberMinValueProperty, numberMaxValueProperty, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, richTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_LOCAL_DATA_SOURCE_PREFIX, AXP_LOCAL_DATA_SOURCE_STORE, isLocalDataSourceRef, parseLocalDataSourceId, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, selectEditorDefaultValueProperty, AXP_DIRECTION_PROPERTY, selectionListEditorDefaultValueProperty, plainTextDefaultProperty, AXP_FALSY_TEXT_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_STYLING_PROPERTY_GROUP, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_TITLE_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_PROPERTY, AXPFlexItemBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_PROFILE, layoutSizeFromDevice, AXP_THEME_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXP_TABLE_COLUMNS_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXPTableItemBaseLayoutWidgetComponent, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, findNonEmptyBreakpoints, buildLocalDataSourceListRows, toLocalDataSourceRef, createDefaultLocalDataSourceColumns, padLocalDataSourceSheetRows, coerceSpacingProfile, spacingBoxOrEmpty, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXP_NAME_PROPERTY, AXP_DISABLED_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_TEXT_PROPERTY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ACTION_CATEGORY, AXP_DATA_PATH_PROPERTY, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXP_LABEL_PROPERTY, AXP_READONLY_PROPERTY, AXP_TRIGGERS_PROPERTY, booleanDefaultProperty, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_PLACEHOLDER_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_DATA_PROPERTY_GROUP, AXP_HAS_LABEL_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXPColumnTruncatedTextComponent, AXP_MULTI_LANGUAGE_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, largeTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, numberDefaultProperty, numberMinValueProperty, numberMaxValueProperty, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, richTextDefaultProperty, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_LOCAL_DATA_SOURCE_PREFIX, AXP_LOCAL_DATA_SOURCE_STORE, isLocalDataSourceRef, parseLocalDataSourceId, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_PREFETCH_PROPERTY, selectEditorDefaultValueProperty, resolveWidgetExposeHydrateWrites, AXP_DIRECTION_PROPERTY, selectionListEditorDefaultValueProperty, plainTextDefaultProperty, AXP_FALSY_TEXT_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_STYLING_PROPERTY_GROUP, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXPWidgetRegistryService, AXPPropertyEditorHelper, AXP_WIDGETS_LAYOUT_SUB_GRID, AXPBlockBaseLayoutWidgetComponent, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_TITLE_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXPFlexBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_PROPERTY, AXPFlexItemBaseLayoutWidgetComponent, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_PROFILE, layoutSizeFromDevice, AXP_THEME_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXPTableBaseLayoutWidgetComponent, AXP_TABLE_COLUMNS_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXPTableItemBaseLayoutWidgetComponent, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, findNonEmptyBreakpoints, buildLocalDataSourceListRows, toLocalDataSourceRef, createDefaultLocalDataSourceColumns, padLocalDataSourceSheetRows, coerceSpacingProfile, spacingBoxOrEmpty, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_APPEARANCE_PROPERTY_GROUP, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXPGridItemBaseLayoutWidgetComponent, syncRequiredIndicator, validationExpressionScope, AXPGridBaseLayoutWidgetComponent, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/layout/widget-core';
 import { AXActionSheetService } from '@acorex/components/action-sheet';
 import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
@@ -20,7 +20,7 @@ import * as i1$8 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i1$6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString as resolveMultiLanguageString$1 } from '@acorex/core/translation';
-import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, ALL_DEFAULT_OPERATORS, AXPClipBoardService, AXPSettingsService, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, isPendingCascadeFilter, AXPFileStorageService, resolveStoredImageDisplayUrl, AXP_INTEGRATION_RUNTIME_PROVIDER, commandMessageTextForError, normalizePositiveNumberOption, resolveEntityRowDisplayText, resolveEntityRowDisplayTitle, downloadGraphicFromElement, printGraphicFromElement, AXPStatusDefinitionProviderService, isStoredImageFileId, AXP_ENTITY_LIST_DISPLAY_MODE_DEFAULT, AXPCommonSettings } from '@acorex-platform/framework-client/common';
+import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, ALL_DEFAULT_OPERATORS, AXPSettingsService, AXPClipBoardService, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, AXPFilterDefaultOperatorService, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, isPendingCascadeFilter, AXPFileStorageService, resolveStoredImageDisplayUrl, AXP_INTEGRATION_RUNTIME_PROVIDER, commandMessageTextForError, normalizePositiveNumberOption, resolveEntityRowDisplayText, isStoredImageFileId, normalizeStoredImageRef, resolveEntityRowDisplayTitle, downloadGraphicFromElement, triggerBrowserDownload, printGraphicFromElement, AXPStatusDefinitionProviderService, AXP_ENTITY_LIST_DISPLAY_MODE_DEFAULT, AXPCommonSettings, AXP_FILTER_DEFAULT_OPERATORS_WIDGET_NAME } from '@acorex-platform/framework-client/common';
 import { AXPDeviceService, setupPopupFooterKeyboardShortcuts, ensureRuntimeSurfaceClass, AXPColorPaletteService, AXPDebugService, FORM_DIRTY_TRACE_NS, applyFilterArray, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPLogoComponent, AXPEntityBroadcastService, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex-platform/framework-client/core';
 import * as i1$5 from '@angular/common';
 import { CommonModule, AsyncPipe, NgTemplateOutlet } from '@angular/common';
@@ -30,15 +30,16 @@ import * as i1$7 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXLookupComponent } from '@acorex/components/lookup';
 import { AXFormatService } from '@acorex/core/format';
-import { resolveMultiLanguageString, setSmart, omitFilterClauseIdentity, createRandomUuid, themeSurfaceVariantFromClass, toRuntimeSurfaceClassName, resolveToSurfaceClass, parseRuntimeHexSurface, listThemeSurfaceGroups, normalizeHexColor, extractValue, AXPRegionalSetting, filterOperatorAllowsEmptyValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, isFormValueEqual, runtimeQueryPayloadData, runtimeQueryCollectionData, isSelectionValueEqual, isLocaleStringMap, AXPWidgetsCatalog, AXP_INTEGRATION_CONNECTION_STATUS, AXP_INTEGRATION_AUTH_METHOD_TYPE, sortByMultiLanguageString, axpGridItemPlacementClassMap, AXPFileStorageStatus, AXPPlatformScope, flattenQueryFilterUserGroups, isPersistableFilterQuery, AXPWidgetsList, axpGridNarrowContainerQueryPrefix, normalizeDefinitionCategories, runtimeQueryFailure, runtimeQuerySuccessObject } from '@acorex-platform/framework-shared/core';
+import { resolveMultiLanguageString, setSmart, coerceFilterDisplayText, AXPRegionalSetting, omitFilterClauseIdentity, createRandomUuid, themeSurfaceVariantFromClass, toRuntimeSurfaceClassName, resolveToSurfaceClass, parseRuntimeHexSurface, listThemeSurfaceGroups, normalizeHexColor, extractValue, filterOperatorAllowsEmptyValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, isFormValueEqual, runtimeQueryPayloadData, runtimeQueryCollectionData, isSelectionValueEqual, isLocaleStringMap, AXPWidgetsCatalog, AXP_INTEGRATION_CONNECTION_STATUS, AXP_INTEGRATION_AUTH_METHOD_TYPE, AXPFileStorageStatus, sortByMultiLanguageString, axpGridItemPlacementClassMap, collectQueryFilterLeaves, AXPPlatformScope, flattenQueryFilterUserGroups, isPersistableFilterQuery, AXPWidgetsList, axpGridNarrowContainerQueryPrefix, normalizeDefinitionCategories, runtimeQueryFailure, runtimeQuerySuccessObject } from '@acorex-platform/framework-shared/core';
 import { get, set, castArray, isNil, cloneDeep, isEqual, isNull, isEmpty, isPlainObject, isString, isNumber, defaultTo, has } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPCommandService, AXPQueryService, provideQuerySetups } from '@acorex-platform/framework-client/runtime';
 import { cloneProperty, AXPWidgetGroupEnum, createSelectProperty, createStringProperty, createNumberProperty, createBooleanProperty, AXPWidgetStatus, resolveLayoutProfileValue, layoutProfileKeyFromContext, isLayoutProfileKeyConfigured, resolveLayoutProfile, layoutProfileContextForKey, resolveLayoutProfileExcluding, diffLayoutProfileLayer } from '@acorex-platform/framework-shared/widget-core';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXCalendarService, AXTimeDurationFormatter } from '@acorex/core/date-time';
 import { AXPDialogOpener, AXPLayoutBuilderService } from '@acorex-platform/framework-client/layout/builder';
-import { AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPFileChooserService, createAttachedFileProviderMenu, AXPFileViewerComponent, AXPStateMessageComponent, normalizeFileViewerBoundValue, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXP_SIGNATURE_PROVIDER, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPLocalDataSourceEditorDialogService, AXPSpreadsheetComponent, AXPQueryViewSaveDialogService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewTabsComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPFileChooserService, createAttachedFileProviderMenu, AXPFileViewerComponent, AXPStateMessageComponent, normalizeFileViewerBoundValue, AXPOutcomeResultsViewerComponent, AXP_IMAGE_FILE_CHOOSER_ACCEPT, fileListItemToImageFile, AXPSignatureEditorService, AXP_SIGNATURE_PROVIDER, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPLocalDataSourceEditorDialogService, AXPSpreadsheetComponent, AXPQueryViewSaveDialogService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewTabsComponent } from '@acorex-platform/framework-client/layout/components';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXColorUtil } from '@acorex/core/utils';
@@ -47,7 +48,6 @@ import { AXColorBoxModule } from '@acorex/components/color-box';
 import { AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import * as i3$2 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
-import { AXCalendarService, AXTimeDurationFormatter } from '@acorex/core/date-time';
 import * as i3$1 from '@acorex/components/popover';
 import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
 import * as i2$4 from '@acorex/components/selection-list';
@@ -996,6 +996,7 @@ const I18N$3 = {
     or: '@general:terms.interface.filter.chip-logic-or',
     rangeAnd: '@general:terms.interface.filter.range-and',
 };
+const ISO_INSTANT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?(?:Z|[+-]\d{2}:\d{2})$/;
 const OPERATOR_ALIASES = {
     eq: 'equal',
     ne: 'notEqual',
@@ -1079,7 +1080,8 @@ async function formatNode(clause, options, isRoot) {
     const operatorName = OPERATOR_ALIASES[operatorType] ?? operatorType;
     const operatorKey = ALL_DEFAULT_OPERATORS.find((item) => item.name === operatorName)?.title;
     const operator = operatorKey ? await options.translate(operatorKey) : operatorType;
-    const valueText = await formatValue(clause.value, options);
+    const storedLabel = coerceFilterDisplayText(clause.displayText);
+    const valueText = storedLabel ?? (await formatValue(clause.value, options, isDateFilterWidget(definition)));
     const tokens = [
         { kind: 'title', text: fieldTitle },
         { kind: 'operator', text: operator },
@@ -1089,26 +1091,35 @@ async function formatNode(clause, options, isRoot) {
     }
     return tokens;
 }
-async function formatValue(value, options) {
+async function formatValue(value, options, formatDates) {
     const unwrapped = unwrapDisplayValue(value);
     if (unwrapped == null || unwrapped === '') {
         return '';
     }
     if (Array.isArray(unwrapped)) {
-        const labels = await Promise.all(unwrapped.map((item) => formatValue(item, options)));
+        const labels = await Promise.all(unwrapped.map((item) => formatValue(item, options, formatDates)));
         return labels.filter(Boolean).join(', ');
     }
     if (isRange(unwrapped)) {
-        const from = await formatValue(unwrapped.from, options);
-        const to = await formatValue(unwrapped.to, options);
+        const from = await formatValue(unwrapped.from, options, formatDates);
+        const to = await formatValue(unwrapped.to, options, formatDates);
         return options.translate(I18N$3.rangeAnd, { from, to });
     }
-    const text = String(unwrapped).trim();
+    let text = String(unwrapped).trim();
     if (!text) {
         return '';
     }
+    if (formatDates && options.formatInstant && ISO_INSTANT.test(text)) {
+        const formatted = options.formatInstant(text).trim();
+        if (formatted) {
+            text = formatted;
+        }
+    }
     return options.translate(text);
 }
+function isDateFilterWidget(definition) {
+    return (definition?.widget?.type ?? '').includes('date');
+}
 function unwrapDisplayValue(value) {
     if (value == null || typeof value !== 'object' || Array.isArray(value)) {
         return value;
@@ -1120,6 +1131,9 @@ function unwrapDisplayValue(value) {
     if (typeof record['title'] === 'string' && record['title'].trim()) {
         return record['title'];
     }
+    if (typeof record['name'] === 'string' && record['name'].trim()) {
+        return record['name'];
+    }
     if ('from' in record || 'to' in record) {
         return record;
     }
@@ -1187,6 +1201,8 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
         this.popupService = inject(AXPopupService);
         this.dialogOpener = inject(AXPDialogOpener);
         this.translation = inject(AXTranslationService);
+        this.calendarService = inject(AXCalendarService);
+        this.settingsService = inject(AXPSettingsService);
         //#endregion
         //#region ----- Constants -----
         this.I18N = I18N$2;
@@ -1196,6 +1212,8 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "sentence" }] : /* istanbul ignore next */ []));
         this.tokens = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
+        this.dateFormat = signal('YYYY/MM/DD', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
         this.sentenceGeneration = 0;
         //#endregion
         //#region ----   Computed   ----
@@ -1214,8 +1232,15 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
         this.activeLang = toSignal(this.translation.langChanges$, {
             initialValue: this.translation.getActiveLang(),
         });
+        effect(() => {
+            void this.settingsService.get(AXPRegionalSetting.ShortDate).then((format) => {
+                const text = typeof format === 'string' ? format.trim() : '';
+                this.dateFormat.set(text || 'YYYY/MM/DD');
+            }, () => undefined);
+        });
         effect(() => {
             void this.activeLang();
+            const dateFormat = this.dateFormat();
             if (!this.isSummaryLook()) {
                 return;
             }
@@ -1225,6 +1250,7 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
             void formatConditionBuilderChip(clause, {
                 filterDefinitions: definitions,
                 translate: (key, params) => this.translateText(key, params),
+                formatInstant: (iso) => this.formatInstant(iso, dateFormat),
             })
                 .then((next) => {
                 if (generation === this.sentenceGeneration) {
@@ -1280,6 +1306,14 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
             return;
         }
     }
+    formatInstant(iso, format) {
+        try {
+            return this.calendarService.convert(iso).format(format);
+        }
+        catch {
+            return iso;
+        }
+    }
     async translateText(key, params) {
         if (!key.startsWith('@')) {
             return key;
@@ -1690,29 +1724,53 @@ var checkboxWidgetDesigner_component = /*#__PURE__*/Object.freeze({
     AXPCheckBoxWidgetDesignerComponent: AXPCheckBoxWidgetDesignerComponent
 });
 
+function applyNegativeBoolean(value, negative) {
+    if (typeof value !== 'boolean' || !negative) {
+        return value;
+    }
+    return !value;
+}
+
+//#endregion
+//#region ----- Component -----
 class AXPCheckBoxWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.disabled = computed(() => this.options()['disabled'], /* @ts-ignore */
+        //#region ----- Computed Properties -----
+        this.negative = computed(() => this.options()['negative'] === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negative" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.options()['disabled'] === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.readonly = computed(() => this.options()['readonly'], /* @ts-ignore */
+        this.readonly = computed(() => this.options()['readonly'] === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.label = computed(() => this.options()['label'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ----- Event Handlers -----
+    displayValue() {
+        return applyNegativeBoolean(this.getValue(), this.negative());
+    }
+    onControlChanged(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.setValue(applyNegativeBoolean(event.value, this.negative()));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCheckBoxWidgetEditComponent, isStandalone: true, selector: "axp-checkbox-widget-edit", usesInheritance: true, ngImport: i0, template: `
     <ax-check-box
-      [ngModel]="this.getValue()"
+      [ngModel]="displayValue()"
       [disabled]="disabled()"
       [readonly]="readonly()"
-      (onValueChanged)="handleValueChanged($event)"
+      (onValueChanged)="onControlChanged($event)"
     >
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
+          [disabled]="validation.disabled === true"
         ></ax-validation-rule>
       }
       @if (label()) {
@@ -1727,16 +1785,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'axp-checkbox-widget-edit',
                     template: `
     <ax-check-box
-      [ngModel]="this.getValue()"
+      [ngModel]="displayValue()"
       [disabled]="disabled()"
       [readonly]="readonly()"
-      (onValueChanged)="handleValueChanged($event)"
+      (onValueChanged)="onControlChanged($event)"
     >
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
+          [disabled]="validation.disabled === true"
         ></ax-validation-rule>
       }
       @if (label()) {
@@ -2146,7 +2205,7 @@ class AXPColorBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -2171,7 +2230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -3795,7 +3854,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
             [rule]="validation.rule"
             [message]="validation.message ?? validation.options?.message"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-box>
       @if (hasLabel()) {
@@ -3815,7 +3874,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-lookup>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -3840,7 +3899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [rule]="validation.rule"
             [message]="validation.message ?? validation.options?.message"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-box>
       @if (hasLabel()) {
@@ -4305,7 +4364,7 @@ class AXPFilterOperationsComponent {
         return resolved.length > 0 ? resolved : base;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, host: { properties: { "class.axp-filter-operations--select": "look() === \"select\"" }, classAttribute: "block min-w-0" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n  @if (look() === 'select') {\n    <!-- ----- Operator as a visible dropdown ----- -->\n    <ax-lookup\n      class=\"ax-sm w-full\"\n      mode=\"drop-down-list\"\n      look=\"outline\"\n      [dataSource]=\"operationItems()\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [searchable]=\"false\"\n      [(ngModel)]=\"selectedOperation\"\n    />\n  }\n  <!-- ----- Compact operator menu ----- -->\n  @else {\n    <ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n      <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n    </ax-button>\n    <ax-popover\n      #operatorsPopover\n      [target]=\"changeOperator\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n    >\n      <div\n        class=\"max-h-max overflow-auto bg-lightest py-5 px-3 border border-default rounded-md shadow-md w-full min-w-[250px]\"\n      >\n        <ax-selection-list\n          class=\"\"\n          [valueField]=\"'name'\"\n          [textField]=\"'title'\"\n          [(ngModel)]=\"selectedOperation\"\n          (ngModelChange)=\"operatorsPopover.close()\"\n          [direction]=\"'vertical'\"\n          [items]=\"operationItems()\"\n          [multiple]=\"false\"\n        ></ax-selection-list>\n      </div>\n    </ax-popover>\n  }\n}\n", styles: [":host.axp-filter-operations--select{min-width:9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, host: { properties: { "class.axp-filter-operations--select": "look() === \"select\"" }, classAttribute: "block min-w-0" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n  @if (look() === 'select') {\n    <!-- ----- Operator as a visible dropdown ----- -->\n    <ax-lookup\n      class=\"ax-sm w-full\"\n      mode=\"drop-down-list\"\n      look=\"outline\"\n      [dataSource]=\"operationItems()\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [searchable]=\"false\"\n      [(ngModel)]=\"selectedOperation\"\n    />\n  }\n  <!-- ----- Compact operator menu ----- -->\n  @else {\n    <ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n      <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n    </ax-button>\n    <ax-popover\n      #operatorsPopover\n      [target]=\"changeOperator\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n    >\n      <div\n        class=\"max-h-max overflow-auto bg-lightest py-5 px-3 border border-default rounded-md shadow-md w-full min-w-[250px]\"\n      >\n        <ax-selection-list\n          class=\"\"\n          [valueField]=\"'name'\"\n          [textField]=\"'title'\"\n          [(ngModel)]=\"selectedOperation\"\n          (ngModelChange)=\"operatorsPopover.close()\"\n          [direction]=\"'vertical'\"\n          [items]=\"operationItems()\"\n          [multiple]=\"false\"\n        ></ax-selection-list>\n      </div>\n    </ax-popover>\n  }\n}\n", styles: [":host.axp-filter-operations--select{min-width:9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -4369,6 +4428,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         //#region ---- Services & Dependencies ----
         this.validationService = inject(AXValidationService);
         this.settingsService = inject(AXPSettingsService);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         this.calendarService = inject(AXCalendarService);
         this.translationService = inject(AXTranslationService);
         //#endregion
@@ -4403,8 +4463,6 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             return this.resolvedPresets().find((p) => p.id === id && p.kind === 'manual');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedManualPreset" }] : /* istanbul ignore next */ []));
-        this.showTime = computed(() => this.options()['showTime'] ?? false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
         this.minValue = computed(() => this.normalizeBoundValue(this.options()['minValue'], 'min'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
         this.maxValue = computed(() => this.normalizeBoundValue(this.options()['maxValue'], 'max'), /* @ts-ignore */
@@ -4470,7 +4528,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                 if (ops?.length === 1) {
                     return { type: ops[0].name };
                 }
-                return { type: AXP_DATETIME_FILTER_DEFAULT_OPERATOR };
+                return { type: this.filterDefaults.resolve('datetime-filter', AXP_DATETIME_FILTER_DEFAULT_OPERATOR) };
             }
             return existing ?? { type: 'between' };
         }, /* @ts-ignore */
@@ -4506,14 +4564,8 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
          * date-only fields compare at day precision (same calendar date passes with `inclusive: true`).
          */
         this.validationRules = computed(() => {
-            const validationsRaw = this.options()['validations'];
-            if (validationsRaw == null) {
-                return [];
-            }
             const compareUnit = this.dateCompareUnit();
-            return Object.values(validationsRaw)
-                .filter((validation) => validation != null)
-                .map((validation) => this.mapDateThresholdValidation(validation, compareUnit));
+            return this.validationRulesWithDisabled().map((validation) => this.mapDateThresholdValidation(validation, compareUnit));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "validationRules" }] : /* istanbul ignore next */ []));
         //#endregion
@@ -4648,10 +4700,15 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         });
     }
     handleValueChange(e) {
-        if (e.isUserInteraction) {
-            this.#hasUserInteracted = true;
-            this.setValue(this.normalizeFieldValue(e.value));
+        if (!e.isUserInteraction) {
+            return;
+        }
+        const nextValue = this.normalizeFieldValue(e.value);
+        if (this.representsSameInstant(this.getValue(), nextValue)) {
+            return;
         }
+        this.#hasUserInteracted = true;
+        this.setValue(nextValue);
     }
     //#endregion
     //#region ---- Filter Mode Handlers ----
@@ -4701,14 +4758,26 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.translatedPresets.set(translated);
     }
     dateCompareUnit() {
-        if (this.format() === 'time') {
-            return 'minute';
-        }
-        if (this.format() === 'datetime' && this.showTime()) {
+        if (this.format() === 'time' || this.format() === 'datetime') {
             return 'minute';
         }
         return 'day';
     }
+    representsSameInstant(current, next) {
+        if ((current == null || current === '') && (next == null || next === '')) {
+            return true;
+        }
+        const currentTime = this.toInstant(current);
+        const nextTime = this.toInstant(next);
+        if (currentTime == null || nextTime == null) {
+            return current === next;
+        }
+        return currentTime === nextTime;
+    }
+    toInstant(value) {
+        const time = this.toAxDateTime(value)?.date.getTime();
+        return time == null || Number.isNaN(time) ? null : time;
+    }
     normalizeFieldValue(value) {
         if (value == null || value === '') {
             return null;
@@ -4769,10 +4838,11 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     mapDateThresholdValidation(validation, compareUnit) {
         const message = validation.message ?? validation.options?.message ?? '';
         const options = validation.options;
+        const keepDisabled = (rule) => validation.disabled === undefined ? rule : { ...rule, disabled: validation.disabled };
         if (validation.rule === 'greaterThan' && options?.value != null) {
             const bound = options.value;
             const inclusive = options.inclusive === true;
-            return {
+            return keepDisabled({
                 rule: 'callback',
                 message,
                 options: {
@@ -4793,12 +4863,12 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                         return current.isAfter(minimum, compareUnit);
                     },
                 },
-            };
+            });
         }
         if (validation.rule === 'lessThan' && options?.value != null) {
             const bound = options.value;
             const inclusive = options.inclusive === true;
-            return {
+            return keepDisabled({
                 rule: 'callback',
                 message,
                 options: {
@@ -4819,12 +4889,12 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                         return current.isBefore(maximum, compareUnit);
                     },
                 },
-            };
+            });
         }
         if (validation.rule === 'between' && options?.min != null && options?.max != null) {
             const minBound = options.min;
             const maxBound = options.max;
-            return {
+            return keepDisabled({
                 rule: 'callback',
                 message,
                 options: {
@@ -4844,7 +4914,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                         return current.compare(minimum, compareUnit) >= 0 && current.compare(maximum, compareUnit) <= 0;
                     },
                 },
-            };
+            });
         }
         return validation;
     }
@@ -4972,11 +5042,11 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class.axp-format-time": "this.timeFormatClass", "class": "this.__class" } }, viewQueries: [{ propertyName: "lookup", first: true, predicate: ["lookup"], descendants: true, isSignal: true }, { propertyName: "standardDateTimeBox", first: true, predicate: ["standardDateTimeBox"], 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=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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=\"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]=\"$safeNavigationMigration(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        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\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=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\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-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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=\"w-full 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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    #standardDateTimeBox\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 validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\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", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$2.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: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class.axp-format-time": "this.timeFormatClass", "class": "this.__class" } }, viewQueries: [{ propertyName: "lookup", first: true, predicate: ["lookup"], descendants: true, isSignal: true }, { propertyName: "standardDateTimeBox", first: true, predicate: ["standardDateTimeBox"], 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=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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=\"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]=\"$safeNavigationMigration(validation.options?.message)\"\n              [options]=\"validation.options\"\n             [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\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=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\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-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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=\"w-full 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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    #standardDateTimeBox\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 validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$2.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: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-date-time-box-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXFormModule, AXValidationModule, AXDateTimeBoxModule, AXDecoratorModule, AXLookupComponent, 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=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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=\"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]=\"$safeNavigationMigration(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        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\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=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\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-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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=\"w-full 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\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    #standardDateTimeBox\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 validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\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", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"] }]
+            args: [{ selector: 'axp-date-time-box-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXFormModule, AXValidationModule, AXDateTimeBoxModule, AXDecoratorModule, AXLookupComponent, 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=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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=\"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]=\"$safeNavigationMigration(validation.options?.message)\"\n              [options]=\"validation.options\"\n             [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\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=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\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-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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=\"w-full 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 validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n               [disabled]=\"validation.disabled === true\"></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    #standardDateTimeBox\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 validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"] }]
         }], ctorParameters: () => [], propDecorators: { lookup: [{ type: i0.ViewChild, args: ['lookup', { isSignal: true }] }], standardDateTimeBox: [{ type: i0.ViewChild, args: ['standardDateTimeBox', { isSignal: true }] }], timeFormatClass: [{
                 type: HostBinding,
                 args: ['class.axp-format-time']
@@ -5195,7 +5265,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
         </ax-text-area>
         @if (effectiveMultiLanguage()) {
@@ -5237,7 +5307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
         </ax-text-area>
         @if (effectiveMultiLanguage()) {
@@ -5831,7 +5901,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPValueWidgetComponent {
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
           @if (clearButton()) {
             <ax-clear-button></ax-clear-button>
@@ -5886,7 +5956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
           @if (clearButton()) {
             <ax-clear-button></ax-clear-button>
@@ -6229,7 +6299,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -6248,7 +6318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -6591,7 +6661,7 @@ class AXPProgressBarWidgetEditComponent extends AXPValueWidgetComponent {
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-range-slider>
       @if (showText()) {
@@ -6621,7 +6691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-range-slider>
       @if (showText()) {
@@ -6897,7 +6967,7 @@ class AXPRatePickerWidgetEditComponent extends AXPValueWidgetComponent {
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
     </ax-rate-picker>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -6919,7 +6989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
     </ax-rate-picker>
   `,
@@ -7395,7 +7465,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         [rule]="validation.rule"
         [message]="$safeNavigationMigration(validation.options?.message)"
         [options]="validation.options"
-      ></ax-validation-rule>
+       [disabled]="validation.disabled === true"></ax-validation-rule>
     }
   </ax-text-editor>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextEditorModule }, { kind: "component", type: i2$5.AXTextEditorComponent, selector: "ax-text-editor", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "look", "placeHolder", "outputFormat", "line", "initialLine", "maxLine"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i2$5.AXTextEditorToolbarComponent, selector: "ax-text-editor-toolbar", inputs: ["orientation"] }, { kind: "component", type: i2$5.AXTextEditorContentComponent, selector: "ax-text-editor-content" }, { kind: "component", type: i2$5.AXTextEditorHistoryComponent, selector: "ax-text-editor-history" }, { kind: "component", type: i2$5.AXTextEditorFontStyleComponent, selector: "ax-text-editor-font-style" }, { kind: "component", type: i2$5.AXTextEditorAlignmentComponent, selector: "ax-text-editor-alignment" }, { kind: "component", type: i2$5.AXTextEditorColorsComponent, selector: "ax-text-editor-colors" }, { kind: "component", type: i2$5.AXTextEditorListComponent, selector: "ax-text-editor-list" }, { kind: "component", type: i2$5.AXTextEditorLinkComponent, selector: "ax-text-editor-link" }, { kind: "component", type: i2$5.AXTextEditorMediaComponent, selector: "ax-text-editor-media" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -7442,7 +7512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         [rule]="validation.rule"
         [message]="$safeNavigationMigration(validation.options?.message)"
         [options]="validation.options"
-      ></ax-validation-rule>
+       [disabled]="validation.disabled === true"></ax-validation-rule>
     }
   </ax-text-editor>`,
                     encapsulation: ViewEncapsulation.None,
@@ -8360,6 +8430,7 @@ const AXPSelectBoxWidget = {
         AXP_PLACEHOLDER_PROPERTY,
         AXP_HAS_CLEAR_BUTTON_PROPERTY,
         AXP_ALLOW_SEARCH_PROPERTY,
+        AXP_PREFETCH_PROPERTY,
         AXP_TRIGGERS_PROPERTY,
         AXP_REQUIRED_VALIDATION_PROPERTY,
     ],
@@ -8387,6 +8458,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         super(...arguments);
         this.widgetsConfigs = inject(STRATEGY_CONFIG_TOKEN);
         this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         this.translationService = inject(AXTranslationService);
         this.localeService = inject(AXLocaleService);
         this.destroyRef = inject(DestroyRef);
@@ -8447,15 +8519,21 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allowSearch" }] : /* istanbul ignore next */ []));
+        /** Loads ax-lookup data source on render (registry / AXDataSource only). */
+        this.prefetch = computed(() => this.options()['prefetch'] ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefetch" }] : /* istanbul ignore next */ []));
         this.filter = computed(() => this.options()['filter'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
         this.filterMode = computed(() => this.options()['filterMode'] ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+        /** When false, an empty cascade filter does not lock the editor. Explicit `disabled` is independent. */
+        this.waitForCascade = computed(() => this.options()['waitForCascade'] ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "waitForCascade" }] : /* istanbul ignore next */ []));
         this.lookupMode = computed(() => (this.multiple() ? 'multi-select' : 'drop-down-list'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lookupMode" }] : /* istanbul ignore next */ []));
         /** Parent cascade with an empty value. Structurally empty filters and top-level not-in stay enabled. */
         this.hasPendingCascadeFilter = computed(() => {
-            if (this.filterMode()) {
+            if (this.filterMode() || !this.waitForCascade()) {
                 return false;
             }
             return isPendingCascadeFilter(this.filter());
@@ -8469,7 +8547,12 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             return this.dataSource();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDataSource" }] : /* istanbul ignore next */ []));
-        this.isSelectBoxDisabled = computed(() => this.disabled() || this.hasPendingCascadeFilter(), /* @ts-ignore */
+        this.isSelectBoxDisabled = computed(() => {
+            if (this.disabled()) {
+                return true;
+            }
+            return this.hasPendingCascadeFilter();
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSelectBoxDisabled" }] : /* istanbul ignore next */ []));
         /** For filter mode: display valueField from object to avoid [object Object] when value is stored as full item */
         this.selectFilterDisplayValue = computed(() => {
@@ -8554,7 +8637,9 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 });
                 return;
             }
-            this.queryDataSourceReady.set(false);
+            // Base data-source effect already sets queryDataSourceReady (sync, before paint).
+            // Clearing it here runs after that and sticks: later options emits with the same
+            // query key return early and never mark ready, so Default Value stays a skeleton.
             this.selectedItems.set([]);
             this.setValue(null);
             this.refresh();
@@ -8599,7 +8684,8 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         this.commitEditorChange(!!e.isUserInteraction, e.value, this.resolveComboRows(e.value));
     }
     handleLookupValueChange(e) {
-        this.commitEditorChange(!!e.isUserInteraction, e.value, this.resolveLookupRows(e.value));
+        const forceValueCommit = !e.isUserInteraction && this.prefetch() && this.#isBoundSelectionEmpty() && !this.#isSelectionValueEmpty(e.value);
+        this.commitEditorChange(!!e.isUserInteraction, e.value, this.resolveLookupRows(e.value), { forceValueCommit });
     }
     /**
      * Lookup may skip `onValueChanged` on the first pick. Force a user commit from the selected row.
@@ -8660,7 +8746,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
      * Shared commit path for combo-box and lookup. Hosts emit primitive keys; full rows
      * are resolved by the caller and stored according to strategy / filterMode.
      */
-    commitEditorChange(isUserInteraction, value, componentItems) {
+    commitEditorChange(isUserInteraction, value, componentItems, options = {}) {
         if (!isUserInteraction && this.isStaleFallbackSelection(componentItems)) {
             AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, 'select-box-widget', 'ignored stale fallback', () => ({
                 path: this.fullPath(),
@@ -8671,7 +8757,10 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             return;
         }
         this.selectedItems.set(componentItems);
-        if (!isUserInteraction && !this.filterMode()) {
+        if (!isUserInteraction && !this.filterMode() && !options.forceValueCommit) {
+            if (!this.isStaleFallbackSelection(componentItems)) {
+                this.exposeHydratedSelection(componentItems);
+            }
             AXPDebugService.instance?.trace(FORM_DIRTY_TRACE_NS, 'select-box-widget', 'non-user valueChange', () => ({
                 path: this.fullPath(),
                 value,
@@ -8731,7 +8820,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 value: newValue,
                 displayText: this.resolveFilterDisplayText(this.selectedItems()),
                 operation: {
-                    type: this.multiple() ? 'in' : AXP_SELECT_FILTER_DEFAULT_OPERATOR,
+                    type: this.multiple() ? 'in' : this.filterDefaults.resolve('select-filter', AXP_SELECT_FILTER_DEFAULT_OPERATOR),
                 },
             });
         }
@@ -8751,6 +8840,24 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             this.syncExposePathsToSavedBaseline();
         }
     }
+    /** Fills empty expose targets from the resolved row without running triggers. */
+    exposeHydratedSelection(items) {
+        const currentValue = this.getValue();
+        const hasValue = Array.isArray(currentValue) ? currentValue.length > 0 : currentValue != null && currentValue !== '';
+        if (!hasValue) {
+            return;
+        }
+        const writes = resolveWidgetExposeHydrateWrites({
+            expose: castArray(this.expose() ?? []),
+            items,
+            multiple: this.multiple() === true,
+            widgetPath: this.fullPath(),
+            readTarget: (path) => this.contextService.getValue(path),
+        });
+        for (const write of writes) {
+            this.contextService.update(write.path, write.value, { origin: 'hydrate' });
+        }
+    }
     /**
      * When selection matches saved baseline, align expose targets (restore or remove paths absent from baseline).
      */
@@ -8940,6 +9047,19 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         }
         return this.multiple() ? castArray(value) : [value];
     }
+    #isBoundSelectionEmpty() {
+        const raw = this.filterMode() ? this.selectFilterDisplayValue() : this.getValue();
+        if (raw == null || raw === '') {
+            return true;
+        }
+        return Array.isArray(raw) && raw.length === 0;
+    }
+    #isSelectionValueEmpty(value) {
+        if (value == null || value === '') {
+            return true;
+        }
+        return Array.isArray(value) && value.length === 0;
+    }
     /**
      * Hosts may emit a non-user init event with a placeholder item whose title equals the raw id.
      */
@@ -9036,7 +9156,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" }, classAttribute: "block flex-1" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: AXComboBoxComponent, descendants: true, isSignal: true }, { propertyName: "lookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showSelectBoxSkeleton()) {\n  <!-- ----- Loading indicator while registry data source resolves ----- -->\n  <ax-skeleton [animated]=\"true\" class=\"axp-select-box-skeleton\"></ax-skeleton>\n}\n<!-- ----- In-memory list rendered with combo-box ----- -->\n@else if (isArraySource()) {\n  <ax-combo-box\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [items]=\"comboItems()\"\n    [value]=\"comboValue()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [multiple]=\"multiple()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    (onValueChanged)=\"handleComboValueChange($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-combo-box>\n}\n<!-- ----- Registry or AXDataSource list rendered with lookup ----- -->\n@else if (editorKey()) {\n  <ax-lookup\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [mode]=\"lookupMode()\"\n    [dataSource]=\"effectiveDataSource()\"\n    [valueField]=\"valueField()\"\n    [textField]=\"textField()\"\n    [value]=\"editorValue()\"\n    [valueItems]=\"selectedItems()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    [itemTemplate]=\"multiple() ? lookupItemTemplate : lookupDropDownListItemTemplate\"\n    [selectedTemplate]=\"lookupItemTemplate\"\n    (onValueChanged)=\"handleLookupValueChange($event)\"\n    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"], dependencies: [{ kind: "component", type: AXComboBoxComponent, selector: "ax-combo-box", inputs: ["name", "items", "searchable", "multiple", "adaptivityEnabled", "caption", "alternate", "placeholder", "searchPlaceholder", "highlightSearch", "emptyTemplate", "itemTemplate", "selectedTemplate", "disabled", "readonly", "look", "value"], outputs: ["lookChange", "valueChange", "onValueChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3$5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" }, classAttribute: "block flex-1" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: AXComboBoxComponent, descendants: true, isSignal: true }, { propertyName: "lookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showSelectBoxSkeleton()) {\n  <!-- ----- Loading indicator while registry data source resolves ----- -->\n  <ax-skeleton [animated]=\"true\" class=\"axp-select-box-skeleton\"></ax-skeleton>\n}\n<!-- ----- In-memory list rendered with combo-box ----- -->\n@else if (isArraySource()) {\n  <ax-combo-box\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [items]=\"comboItems()\"\n    [value]=\"comboValue()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [multiple]=\"multiple()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    (onValueChanged)=\"handleComboValueChange($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n  </ax-combo-box>\n}\n<!-- ----- Registry or AXDataSource list rendered with lookup ----- -->\n@else if (editorKey()) {\n  <ax-lookup\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [mode]=\"lookupMode()\"\n    [dataSource]=\"effectiveDataSource()\"\n    [valueField]=\"valueField()\"\n    [textField]=\"textField()\"\n    [value]=\"editorValue()\"\n    [valueItems]=\"selectedItems()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    [prefetch]=\"prefetch() && !hasPendingCascadeFilter()\"\n    [itemTemplate]=\"multiple() ? lookupItemTemplate : lookupDropDownListItemTemplate\"\n    [selectedTemplate]=\"lookupItemTemplate\"\n    (onValueChanged)=\"handleLookupValueChange($event)\"\n    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"], dependencies: [{ kind: "component", type: AXComboBoxComponent, selector: "ax-combo-box", inputs: ["name", "items", "searchable", "multiple", "adaptivityEnabled", "caption", "alternate", "placeholder", "searchPlaceholder", "highlightSearch", "emptyTemplate", "itemTemplate", "selectedTemplate", "disabled", "readonly", "look", "value"], outputs: ["lookChange", "valueChange", "onValueChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3$5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -9051,7 +9171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXSkeletonModule,
                         AXTranslationModule,
                         AsyncPipe,
-                    ], template: "@if (showSelectBoxSkeleton()) {\n  <!-- ----- Loading indicator while registry data source resolves ----- -->\n  <ax-skeleton [animated]=\"true\" class=\"axp-select-box-skeleton\"></ax-skeleton>\n}\n<!-- ----- In-memory list rendered with combo-box ----- -->\n@else if (isArraySource()) {\n  <ax-combo-box\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [items]=\"comboItems()\"\n    [value]=\"comboValue()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [multiple]=\"multiple()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    (onValueChanged)=\"handleComboValueChange($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-combo-box>\n}\n<!-- ----- Registry or AXDataSource list rendered with lookup ----- -->\n@else if (editorKey()) {\n  <ax-lookup\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [mode]=\"lookupMode()\"\n    [dataSource]=\"effectiveDataSource()\"\n    [valueField]=\"valueField()\"\n    [textField]=\"textField()\"\n    [value]=\"editorValue()\"\n    [valueItems]=\"selectedItems()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    [itemTemplate]=\"multiple() ? lookupItemTemplate : lookupDropDownListItemTemplate\"\n    [selectedTemplate]=\"lookupItemTemplate\"\n    (onValueChanged)=\"handleLookupValueChange($event)\"\n    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"] }]
+                    ], template: "@if (showSelectBoxSkeleton()) {\n  <!-- ----- Loading indicator while registry data source resolves ----- -->\n  <ax-skeleton [animated]=\"true\" class=\"axp-select-box-skeleton\"></ax-skeleton>\n}\n<!-- ----- In-memory list rendered with combo-box ----- -->\n@else if (isArraySource()) {\n  <ax-combo-box\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [items]=\"comboItems()\"\n    [value]=\"comboValue()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [multiple]=\"multiple()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    (onValueChanged)=\"handleComboValueChange($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n  </ax-combo-box>\n}\n<!-- ----- Registry or AXDataSource list rendered with lookup ----- -->\n@else if (editorKey()) {\n  <ax-lookup\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [mode]=\"lookupMode()\"\n    [dataSource]=\"effectiveDataSource()\"\n    [valueField]=\"valueField()\"\n    [textField]=\"textField()\"\n    [value]=\"editorValue()\"\n    [valueItems]=\"selectedItems()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    [prefetch]=\"prefetch() && !hasPendingCascadeFilter()\"\n    [itemTemplate]=\"multiple() ? lookupItemTemplate : lookupDropDownListItemTemplate\"\n    [selectedTemplate]=\"lookupItemTemplate\"\n    (onValueChanged)=\"handleLookupValueChange($event)\"\n    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n       [disabled]=\"validation.disabled === true\"></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"] }]
         }], propDecorators: { comboBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXComboBoxComponent), { isSignal: true }] }], lookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }], __class: [{
                 type: HostBinding,
                 args: ['class']
@@ -9397,7 +9517,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
     </ax-selection-list>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -9432,7 +9552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
     </ax-selection-list>
   `,
@@ -9942,7 +10062,7 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -10039,7 +10159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [rule]="validation.rule"
           [message]="$safeNavigationMigration(validation.options?.message)"
           [options]="validation.options"
-        ></ax-validation-rule>
+         [disabled]="validation.disabled === true"></ax-validation-rule>
       }
       @if (hasClearButton()) {
         <ax-clear-button></ax-clear-button>
@@ -10355,7 +10475,7 @@ class AXPTemplateBoxWidgetEditComponent extends AXPValueWidgetComponent {
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-area>
 
@@ -10424,7 +10544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-area>
 
@@ -10746,7 +10866,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
         @if (hasClearButton()) {
           <ax-clear-button></ax-clear-button>
@@ -10789,7 +10909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
         @if (hasClearButton()) {
           <ax-clear-button></ax-clear-button>
@@ -11072,33 +11192,43 @@ var toggleWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPToggleWidgetColumnComponent: AXPToggleWidgetColumnComponent
 });
 
+//#endregion
+//#region ----- Component -----
 class AXPToggleWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.disabled = computed(() => this.options()['disabled'], /* @ts-ignore */
+        //#region ----- Computed Properties -----
+        this.negative = computed(() => this.options()['negative'] === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "negative" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.options()['disabled'] === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.readonly = computed(() => this.options()['readonly'], /* @ts-ignore */
+        this.readonly = computed(() => this.options()['readonly'] === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.label = computed(() => this.options()['label'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.color = computed(() => this.options()['color']?.id ?? 'primary', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     }
-    get __class() {
-        const cls = {};
-        //
-        cls['inline-block'] = true;
-        return cls;
+    //#endregion
+    //#region ----- Event Handlers -----
+    displayValue() {
+        return applyNegativeBoolean(this.getValue(), this.negative());
+    }
+    onControlChanged(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.setValue(applyNegativeBoolean(event.value, this.negative()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-toggle-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPToggleWidgetEditComponent, isStandalone: true, selector: "axp-toggle-widget-edit", host: { classAttribute: "inline-block" }, usesInheritance: true, ngImport: i0, template: `
     <div class="flex items-center gap-2">
       <ax-switch
-        [ngModel]="this.getValue()"
+        [ngModel]="displayValue()"
         [disabled]="disabled()"
         [readonly]="readonly()"
         [color]="color()"
-        (onValueChanged)="handleValueChanged($event)"
+        (onValueChanged)="onControlChanged($event)"
       >
       </ax-switch>
       @if (label()) {
@@ -11114,11 +11244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     template: `
     <div class="flex items-center gap-2">
       <ax-switch
-        [ngModel]="this.getValue()"
+        [ngModel]="displayValue()"
         [disabled]="disabled()"
         [readonly]="readonly()"
         [color]="color()"
-        (onValueChanged)="handleValueChanged($event)"
+        (onValueChanged)="onControlChanged($event)"
       >
       </ax-switch>
       @if (label()) {
@@ -11127,12 +11257,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, AXFormModule, AXSwitchModule, AXValidationModule, AXLabelModule, AXTranslationModule, AsyncPipe],
+                    host: {
+                        class: 'inline-block',
+                    },
+                    imports: [
+                        FormsModule,
+                        AXFormModule,
+                        AXSwitchModule,
+                        AXValidationModule,
+                        AXLabelModule,
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ],
                 }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 var toggleWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -12410,6 +12548,15 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
         };
     }
     //#region ----   Public Methods   ----
+    /** Skeleton rows so a refresh does not keep the previous view's rows or its empty state. */
+    showLoadingPlaceholders() {
+        const grid = this.grid();
+        if (!grid?.displayedRows) {
+            return;
+        }
+        const pageSize = grid.dataSource?.pageSize || 10;
+        grid.displayedRows.set(new Array(pageSize));
+    }
     /**
      * Returns true when the data-table view child accepted the refresh.
      * Callers must retry while this is false (grid may not be ready yet after remount).
@@ -12420,6 +12567,8 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
             return false;
         }
         grid.refresh();
+        // Highlight reset inside refresh paints the previous rows, including an empty result.
+        this.showLoadingPlaceholders();
         this.selectedRows.set([]);
         return true;
     }
@@ -14155,6 +14304,19 @@ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetCo
             !connection.isRevoked &&
             !connection.isDisabled);
     }
+    connectionStatusBadge(providerId) {
+        if (this.isProviderConnected(providerId)) {
+            return { key: `${this.I18N}.status.connected`, color: 'success' };
+        }
+        const connection = this.getConnection(providerId);
+        if (connection?.isDisabled) {
+            return { key: `${this.I18N}.status.disabled`, color: 'warning' };
+        }
+        if (this.isConnectDisabled(providerId) && this.connectDisabledBadgeKey(providerId)) {
+            return null;
+        }
+        return { key: `${this.I18N}.status.not-connected`, color: 'secondary' };
+    }
     supportsConfigure(provider) {
         const connection = this.getConnection(provider.id);
         if (!connection) {
@@ -14266,6 +14428,7 @@ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetCo
                 const message = commandMessageTextForError(result?.message?.text) ||
                     'Failed to connect integration.';
                 this.toastService.danger(message);
+                await this.load();
                 return;
             }
             const data = result.data;
@@ -14310,6 +14473,12 @@ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetCo
                 this.resolveProviderBadges(providers),
                 this.refreshConnectAvailability(providers),
             ]);
+            const refreshedConnections = runtimeQueryCollectionData(await this.queryService.fetch('IntegrationManagement.Connection:ListMine', {
+                ...(this.connectionScopeFilter()
+                    ? { connectionScope: this.connectionScopeFilter() }
+                    : {}),
+            }))?.items ?? [];
+            this.connections.set(refreshedConnections);
         }
         finally {
             if (showBlockingLoader) {
@@ -14352,7 +14521,7 @@ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetCo
         this.providerBadges.set(resolved);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPIntegrationConnectionsPanelWidgetEditComponent, isStandalone: true, selector: "axp-integration-connections-panel-widget-edit", usesInheritance: true, ngImport: i0, template: "<!-- ----- Integration connections panel: loading state or provider cards ----- -->\n<div class=\"flex w-full flex-col gap-4\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while providers and connections are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Provider cards filtered by widget options (providerId, domainId) ----- -->\n  @else {\n    @for (provider of visibleProviders(); track provider.id) {\n      <section\n        class=\"flex flex-col gap-4 rounded-lg border border-surface bg-lighter-surface p-4\"\n      >\n        <div class=\"flex items-start justify-between gap-3\">\n          <!-- ----- Provider identity: logo/icon, title, description, and status badges ----- -->\n          <div class=\"flex min-w-0 items-center gap-3\">\n            @if (provider.logoKey) {\n              <axp-logo\n                [logoKey]=\"provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"24\"\n              />\n            }\n            <!-- ----- Fallback icon when no logo key is configured ----- -->\n            @else if (provider.icon) {\n              <ax-icon class=\"text-lg\">\n                <i [class]=\"provider.icon\"></i>\n              </ax-icon>\n            }\n\n            <div class=\"min-w-0\">\n              <!-- ----- Provider display name and connect-disabled warning badge ----- -->\n              <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                <span>{{ provider.displayName | translate | async }}</span>\n                <!--------------------------------------------------------------->\n                @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                  <span\n                    class=\"inline-flex cursor-help\"\n                    [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                    axTooltipPlacement=\"top\"\n                    [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                  >\n                    <ax-badge\n                      size=\"sm\"\n                      look=\"twotone\"\n                      color=\"warning\"\n                      [text]=\"(badgeKey | translate | async) ?? ''\"\n                    ></ax-badge>\n                  </span>\n                }\n              </div>\n\n              <!--------------------------------------------------------------->\n              <!-- ----- Optional provider description ----- -->\n              @if (provider.description) {\n                <div class=\"text-sm opacity-70\">\n                  {{ provider.description | translate | async }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- ----- Status badges and connect or manage actions ----- -->\n          <div class=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">\n            @if (getProviderBadges(provider.id); as badges) {\n              <!--------------------------------------------------------------->\n              <!-- ----- Runtime connection settings badges (e.g. last sync) ----- -->\n              @if (badges.length > 0) {\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  @for (badge of badges; track badge.text) {\n                    <ax-badge\n                      size=\"sm\"\n                      [look]=\"'twotone'\"\n                      [color]=\"badge.color\"\n                      [text]=\"badge.text\"\n                    ></ax-badge>\n                  }\n                </div>\n              }\n            }\n            @if (isProviderConnected(provider.id)) {\n              <!-- ----- Manage dropdown: reconfigure and disconnect ----- -->\n              <ax-dropdown-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                [mode]=\"'dropdown'\"\n                type=\"button\"\n                [disabled]=\"pendingAction()\"\n                [text]=\"(I18N + '.actions.manage' | translate | async) ?? ''\"\n              >\n                <ax-button-item-list>\n                  @if (supportsConnect(provider)) {\n                    <ax-button-item\n                      [text]=\"(I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                      [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                      (onClick)=\"handleConfigure(provider)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                  @for (action of getManageActions(provider); track action.commandKey) {\n                    <ax-button-item\n                      [text]=\"(action.titleKey | translate | async) ?? ''\"\n                      [color]=\"action.color\"\n                      [disabled]=\"pendingAction()\"\n                      (onClick)=\"handleManageAction(provider, action)\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"action.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                  }\n                  <ax-button-item\n                    [text]=\"(I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                    color=\"danger\"\n                    [disabled]=\"pendingAction()\"\n                    (onClick)=\"disconnect(provider.id)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            }\n            <!-- ----- Connect action when provider is not yet connected ----- -->\n            @else if (supportsConnect(provider)) {\n              <ax-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                type=\"button\"\n                [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                [text]=\"(I18N + '.actions.connect' | translate | async) ?? ''\"\n                (onClick)=\"handleConnect(provider)\"\n              >\n                <ax-suffix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n                </ax-suffix>\n              </ax-button>\n            }\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipOverflowOnly", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPIntegrationConnectionsPanelWidgetEditComponent, isStandalone: true, selector: "axp-integration-connections-panel-widget-edit", usesInheritance: true, ngImport: i0, template: "<!-- ----- Integration connections panel: loading state or provider cards ----- -->\n<div class=\"flex w-full flex-col gap-4\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while providers and connections are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Provider cards filtered by widget options (providerId, domainId) ----- -->\n  @else {\n    @for (provider of visibleProviders(); track provider.id) {\n      <section\n        class=\"flex flex-col gap-4 rounded-lg border border-surface bg-lighter-surface p-4\"\n      >\n        <div class=\"flex items-start justify-between gap-3\">\n          <!-- ----- Provider identity: logo/icon, title, description, and status badges ----- -->\n          <div class=\"flex min-w-0 items-center gap-3\">\n            @if (provider.logoKey) {\n              <axp-logo\n                [logoKey]=\"provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"24\"\n              />\n            }\n            <!-- ----- Fallback icon when no logo key is configured ----- -->\n            @else if (provider.icon) {\n              <ax-icon class=\"text-lg\">\n                <i [class]=\"provider.icon\"></i>\n              </ax-icon>\n            }\n\n            <div class=\"min-w-0\">\n              <!-- ----- Provider display name and connect-disabled warning badge ----- -->\n              <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                <span>{{ provider.displayName | translate | async }}</span>\n                @if (connectionStatusBadge(provider.id); as statusBadge) {\n                  <!-- ----- Connection status beside the provider title ----- -->\n                  <ax-badge\n                    size=\"sm\"\n                    look=\"twotone\"\n                    [color]=\"statusBadge.color\"\n                    [text]=\"(statusBadge.key | translate | async) ?? ''\"\n                  ></ax-badge>\n                }\n                <!--------------------------------------------------------------->\n                @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                  <span\n                    class=\"inline-flex cursor-help\"\n                    [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                    axTooltipPlacement=\"top\"\n                    [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                  >\n                    <ax-badge\n                      size=\"sm\"\n                      look=\"twotone\"\n                      color=\"warning\"\n                      [text]=\"(badgeKey | translate | async) ?? ''\"\n                    ></ax-badge>\n                  </span>\n                }\n              </div>\n\n              <!--------------------------------------------------------------->\n              <!-- ----- Optional provider description ----- -->\n              @if (provider.description) {\n                <div class=\"text-sm opacity-70\">\n                  {{ provider.description | translate | async }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- ----- Connect or manage actions ----- -->\n          <div class=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">\n            @if (getProviderBadges(provider.id); as badges) {\n              <!--------------------------------------------------------------->\n              <!-- ----- Runtime connection settings badges (e.g. last sync) ----- -->\n              @if (badges.length > 0) {\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  @for (badge of badges; track badge.text) {\n                    <ax-badge\n                      size=\"sm\"\n                      [look]=\"'twotone'\"\n                      [color]=\"badge.color\"\n                      [text]=\"badge.text\"\n                    ></ax-badge>\n                  }\n                </div>\n              }\n            }\n            @if (isProviderConnected(provider.id)) {\n              <!-- ----- Manage dropdown: reconfigure and disconnect ----- -->\n              <ax-dropdown-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                [mode]=\"'dropdown'\"\n                type=\"button\"\n                [disabled]=\"pendingAction()\"\n                [text]=\"(I18N + '.actions.manage' | translate | async) ?? ''\"\n              >\n                <ax-button-item-list>\n                  @if (supportsConnect(provider)) {\n                    <ax-button-item\n                      [text]=\"(I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                      [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                      (onClick)=\"handleConfigure(provider)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                  @for (action of getManageActions(provider); track action.commandKey) {\n                    <ax-button-item\n                      [text]=\"(action.titleKey | translate | async) ?? ''\"\n                      [color]=\"action.color\"\n                      [disabled]=\"pendingAction()\"\n                      (onClick)=\"handleManageAction(provider, action)\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"action.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                  }\n                  <ax-button-item\n                    [text]=\"(I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                    color=\"danger\"\n                    [disabled]=\"pendingAction()\"\n                    (onClick)=\"disconnect(provider.id)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            }\n            <!-- ----- Connect action when provider is not yet connected ----- -->\n            @else if (supportsConnect(provider)) {\n              <ax-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                type=\"button\"\n                [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                [text]=\"(I18N + '.actions.connect' | translate | async) ?? ''\"\n                (onClick)=\"handleConnect(provider)\"\n              >\n                <ax-suffix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n                </ax-suffix>\n              </ax-button>\n            }\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipOverflowOnly", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, decorators: [{
             type: Component,
@@ -14366,7 +14535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                         AXTooltipModule,
                         AXPLogoComponent,
-                    ], template: "<!-- ----- Integration connections panel: loading state or provider cards ----- -->\n<div class=\"flex w-full flex-col gap-4\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while providers and connections are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Provider cards filtered by widget options (providerId, domainId) ----- -->\n  @else {\n    @for (provider of visibleProviders(); track provider.id) {\n      <section\n        class=\"flex flex-col gap-4 rounded-lg border border-surface bg-lighter-surface p-4\"\n      >\n        <div class=\"flex items-start justify-between gap-3\">\n          <!-- ----- Provider identity: logo/icon, title, description, and status badges ----- -->\n          <div class=\"flex min-w-0 items-center gap-3\">\n            @if (provider.logoKey) {\n              <axp-logo\n                [logoKey]=\"provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"24\"\n              />\n            }\n            <!-- ----- Fallback icon when no logo key is configured ----- -->\n            @else if (provider.icon) {\n              <ax-icon class=\"text-lg\">\n                <i [class]=\"provider.icon\"></i>\n              </ax-icon>\n            }\n\n            <div class=\"min-w-0\">\n              <!-- ----- Provider display name and connect-disabled warning badge ----- -->\n              <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                <span>{{ provider.displayName | translate | async }}</span>\n                <!--------------------------------------------------------------->\n                @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                  <span\n                    class=\"inline-flex cursor-help\"\n                    [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                    axTooltipPlacement=\"top\"\n                    [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                  >\n                    <ax-badge\n                      size=\"sm\"\n                      look=\"twotone\"\n                      color=\"warning\"\n                      [text]=\"(badgeKey | translate | async) ?? ''\"\n                    ></ax-badge>\n                  </span>\n                }\n              </div>\n\n              <!--------------------------------------------------------------->\n              <!-- ----- Optional provider description ----- -->\n              @if (provider.description) {\n                <div class=\"text-sm opacity-70\">\n                  {{ provider.description | translate | async }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- ----- Status badges and connect or manage actions ----- -->\n          <div class=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">\n            @if (getProviderBadges(provider.id); as badges) {\n              <!--------------------------------------------------------------->\n              <!-- ----- Runtime connection settings badges (e.g. last sync) ----- -->\n              @if (badges.length > 0) {\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  @for (badge of badges; track badge.text) {\n                    <ax-badge\n                      size=\"sm\"\n                      [look]=\"'twotone'\"\n                      [color]=\"badge.color\"\n                      [text]=\"badge.text\"\n                    ></ax-badge>\n                  }\n                </div>\n              }\n            }\n            @if (isProviderConnected(provider.id)) {\n              <!-- ----- Manage dropdown: reconfigure and disconnect ----- -->\n              <ax-dropdown-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                [mode]=\"'dropdown'\"\n                type=\"button\"\n                [disabled]=\"pendingAction()\"\n                [text]=\"(I18N + '.actions.manage' | translate | async) ?? ''\"\n              >\n                <ax-button-item-list>\n                  @if (supportsConnect(provider)) {\n                    <ax-button-item\n                      [text]=\"(I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                      [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                      (onClick)=\"handleConfigure(provider)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                  @for (action of getManageActions(provider); track action.commandKey) {\n                    <ax-button-item\n                      [text]=\"(action.titleKey | translate | async) ?? ''\"\n                      [color]=\"action.color\"\n                      [disabled]=\"pendingAction()\"\n                      (onClick)=\"handleManageAction(provider, action)\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"action.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                  }\n                  <ax-button-item\n                    [text]=\"(I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                    color=\"danger\"\n                    [disabled]=\"pendingAction()\"\n                    (onClick)=\"disconnect(provider.id)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            }\n            <!-- ----- Connect action when provider is not yet connected ----- -->\n            @else if (supportsConnect(provider)) {\n              <ax-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                type=\"button\"\n                [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                [text]=\"(I18N + '.actions.connect' | translate | async) ?? ''\"\n                (onClick)=\"handleConnect(provider)\"\n              >\n                <ax-suffix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n                </ax-suffix>\n              </ax-button>\n            }\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n" }]
+                    ], template: "<!-- ----- Integration connections panel: loading state or provider cards ----- -->\n<div class=\"flex w-full flex-col gap-4\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while providers and connections are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Provider cards filtered by widget options (providerId, domainId) ----- -->\n  @else {\n    @for (provider of visibleProviders(); track provider.id) {\n      <section\n        class=\"flex flex-col gap-4 rounded-lg border border-surface bg-lighter-surface p-4\"\n      >\n        <div class=\"flex items-start justify-between gap-3\">\n          <!-- ----- Provider identity: logo/icon, title, description, and status badges ----- -->\n          <div class=\"flex min-w-0 items-center gap-3\">\n            @if (provider.logoKey) {\n              <axp-logo\n                [logoKey]=\"provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"24\"\n              />\n            }\n            <!-- ----- Fallback icon when no logo key is configured ----- -->\n            @else if (provider.icon) {\n              <ax-icon class=\"text-lg\">\n                <i [class]=\"provider.icon\"></i>\n              </ax-icon>\n            }\n\n            <div class=\"min-w-0\">\n              <!-- ----- Provider display name and connect-disabled warning badge ----- -->\n              <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                <span>{{ provider.displayName | translate | async }}</span>\n                @if (connectionStatusBadge(provider.id); as statusBadge) {\n                  <!-- ----- Connection status beside the provider title ----- -->\n                  <ax-badge\n                    size=\"sm\"\n                    look=\"twotone\"\n                    [color]=\"statusBadge.color\"\n                    [text]=\"(statusBadge.key | translate | async) ?? ''\"\n                  ></ax-badge>\n                }\n                <!--------------------------------------------------------------->\n                @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                  <span\n                    class=\"inline-flex cursor-help\"\n                    [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                    axTooltipPlacement=\"top\"\n                    [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                  >\n                    <ax-badge\n                      size=\"sm\"\n                      look=\"twotone\"\n                      color=\"warning\"\n                      [text]=\"(badgeKey | translate | async) ?? ''\"\n                    ></ax-badge>\n                  </span>\n                }\n              </div>\n\n              <!--------------------------------------------------------------->\n              <!-- ----- Optional provider description ----- -->\n              @if (provider.description) {\n                <div class=\"text-sm opacity-70\">\n                  {{ provider.description | translate | async }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- ----- Connect or manage actions ----- -->\n          <div class=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">\n            @if (getProviderBadges(provider.id); as badges) {\n              <!--------------------------------------------------------------->\n              <!-- ----- Runtime connection settings badges (e.g. last sync) ----- -->\n              @if (badges.length > 0) {\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  @for (badge of badges; track badge.text) {\n                    <ax-badge\n                      size=\"sm\"\n                      [look]=\"'twotone'\"\n                      [color]=\"badge.color\"\n                      [text]=\"badge.text\"\n                    ></ax-badge>\n                  }\n                </div>\n              }\n            }\n            @if (isProviderConnected(provider.id)) {\n              <!-- ----- Manage dropdown: reconfigure and disconnect ----- -->\n              <ax-dropdown-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                [mode]=\"'dropdown'\"\n                type=\"button\"\n                [disabled]=\"pendingAction()\"\n                [text]=\"(I18N + '.actions.manage' | translate | async) ?? ''\"\n              >\n                <ax-button-item-list>\n                  @if (supportsConnect(provider)) {\n                    <ax-button-item\n                      [text]=\"(I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                      [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                      (onClick)=\"handleConfigure(provider)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                  @for (action of getManageActions(provider); track action.commandKey) {\n                    <ax-button-item\n                      [text]=\"(action.titleKey | translate | async) ?? ''\"\n                      [color]=\"action.color\"\n                      [disabled]=\"pendingAction()\"\n                      (onClick)=\"handleManageAction(provider, action)\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"action.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                  }\n                  <ax-button-item\n                    [text]=\"(I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                    color=\"danger\"\n                    [disabled]=\"pendingAction()\"\n                    (onClick)=\"disconnect(provider.id)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            }\n            <!-- ----- Connect action when provider is not yet connected ----- -->\n            @else if (supportsConnect(provider)) {\n              <ax-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                type=\"button\"\n                [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                [text]=\"(I18N + '.actions.connect' | translate | async) ?? ''\"\n                (onClick)=\"handleConnect(provider)\"\n              >\n                <ax-suffix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n                </ax-suffix>\n              </ax-button>\n            }\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 var integrationConnectionsPanelWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -14865,6 +15034,48 @@ const AXPQrcodeWidget = {
             dataSource: ['svg', 'canvas'],
             defaultValue: 'svg',
         }),
+        createBooleanProperty({
+            name: 'attachmentEnabled',
+            title: 'Attachment Enabled',
+            path: 'options.attachment.enabled',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createBooleanProperty({
+            name: 'attachmentReadonly',
+            title: 'Attachment Readonly',
+            path: 'options.attachment.readonly',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createStringProperty({
+            name: 'attachmentDataPath',
+            title: 'Attachment Data Path',
+            path: 'options.attachment.dataPath',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createStringProperty({
+            name: 'attachmentSources',
+            title: 'Attachment Sources',
+            path: 'options.attachment.sources',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createStringProperty({
+            name: 'attachmentRefType',
+            title: 'Attachment Ref Type',
+            path: 'options.attachment.fileStorage.refType',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createStringProperty({
+            name: 'attachmentRefId',
+            title: 'Attachment Ref Id',
+            path: 'options.attachment.fileStorage.refId',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
+        createStringProperty({
+            name: 'attachmentCategory',
+            title: 'Attachment Category',
+            path: 'options.attachment.fileStorage.category',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        }),
     ],
     components: {
         view: {
@@ -14898,10 +15109,17 @@ class AXPQrcodeViewerService {
     //#endregion
     //#region ---- Public API ----
     async open(options) {
-        const contentValue = options.content;
-        if (!contentValue) {
+        const contentValue = options.content ?? '';
+        const attachmentRef = options.attachmentRef?.trim() || '';
+        const attachmentDataPath = options.attachmentDataPath?.trim() || '';
+        const showAttachment = !!attachmentRef && !!attachmentDataPath && attachmentDataPath !== 'qr';
+        if (!contentValue && !showAttachment) {
             return;
         }
+        const context = { qr: contentValue };
+        if (showAttachment) {
+            assignContextPath(context, attachmentDataPath, attachmentRef);
+        }
         const ref = await this.layoutBuilder
             .create()
             .dialog((dialog) => {
@@ -14909,7 +15127,7 @@ class AXPQrcodeViewerService {
                 .setTitle(this.resolveDialogTitle(options.title))
                 .setSize('md')
                 .setCloseButton(true)
-                .setContext({ qr: contentValue })
+                .setContext(context)
                 .content((content) => {
                 content
                     .setDirection('column')
@@ -14924,7 +15142,17 @@ class AXPQrcodeViewerService {
                     color: options.color ?? '#000000',
                     readonly: true,
                     outputType: options.outputType ?? 'svg',
-                    showContent: true,
+                    showContent: !showAttachment,
+                    suppressPreview: true,
+                    ...(showAttachment
+                        ? {
+                            attachment: {
+                                enabled: true,
+                                readonly: true,
+                                dataPath: attachmentDataPath,
+                            },
+                        }
+                        : {}),
                 });
             })
                 .setActions((actions) => {
@@ -14953,6 +15181,322 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+function assignContextPath(target, path, value) {
+    const keys = path.split('.').filter((key) => key.length > 0);
+    if (keys.length === 0) {
+        return;
+    }
+    let current = target;
+    for (let index = 0; index < keys.length - 1; index += 1) {
+        const key = keys[index];
+        const next = current[key];
+        if (!next || typeof next !== 'object' || Array.isArray(next)) {
+            current[key] = {};
+        }
+        current = current[key];
+    }
+    current[keys[keys.length - 1]] = value;
+}
+
+//#region ---- Constants ----
+const AXP_QRCODE_ATTACHMENT_FILE_PREFIX = 'file:';
+const AXP_QRCODE_ATTACHMENT_LINK_PREFIX = 'link:';
+const AXP_QRCODE_ATTACHMENT_DOCUMENT_PREFIX = 'document:';
+/** File-storage ref used when the parent entity has not been saved yet. */
+const AXP_QRCODE_ATTACHMENT_PENDING_REF_ID = 'pending';
+const AXP_QRCODE_ATTACHMENT_DEFAULT_REF_TYPE = 'qrcode-image';
+const AXP_QRCODE_ATTACHMENT_DEFAULT_CATEGORY = 'qr-code-image';
+const DEVICE_SOURCE = 'system';
+const DRIVE_SOURCE = 'drive';
+//#endregion
+//#region ---- Config ----
+function asRecord(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return null;
+    }
+    return value;
+}
+function readString(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed || undefined;
+}
+function normalizeSourceToken(value) {
+    const key = value.trim().toLowerCase();
+    if (key === 'device' || key === 'system') {
+        return DEVICE_SOURCE;
+    }
+    if (key === 'drive') {
+        return DRIVE_SOURCE;
+    }
+    return null;
+}
+function collectSourceTokens(value, into) {
+    if (typeof value === 'string') {
+        for (const part of value.split(/[,;\s]+/)) {
+            const normalized = normalizeSourceToken(part);
+            if (normalized && !into.includes(normalized)) {
+                into.push(normalized);
+            }
+        }
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (const entry of value) {
+            collectSourceTokens(entry, into);
+        }
+        return;
+    }
+    const record = asRecord(value);
+    const id = readString(record?.['id']) ?? readString(record?.['key']);
+    if (id) {
+        collectSourceTokens(id, into);
+    }
+}
+/**
+ * Reads attachment options. Support stays disabled unless `enabled` is true and a separate `dataPath` is set.
+ * Flat designer keys (`attachmentEnabled`, …) are accepted when the nested `attachment` object is absent.
+ */
+function resolveQrcodeAttachmentConfig(options) {
+    const source = options ?? {};
+    const nested = asRecord(source['attachment']);
+    const fileStorage = asRecord(nested?.['fileStorage']);
+    const sources = [];
+    collectSourceTokens(nested?.['sources'] ?? source['attachmentSources'], sources);
+    const dataPath = readString(nested?.['dataPath']) ?? readString(source['attachmentDataPath']);
+    const enabledFlag = nested?.['enabled'] === true || source['attachmentEnabled'] === true;
+    return {
+        enabled: enabledFlag && !!dataPath,
+        readonly: nested?.['readonly'] === true || source['attachmentReadonly'] === true,
+        dataPath,
+        sources,
+        fileStorage: {
+            refId: readString(fileStorage?.['refId']) ?? readString(source['attachmentRefId']),
+            refType: readString(fileStorage?.['refType']) ?? readString(source['attachmentRefType']),
+            category: readString(fileStorage?.['category']) ?? readString(source['attachmentCategory']),
+        },
+    };
+}
+/** Provider keys to hide so only the configured Device (`system`) and Drive sources remain. */
+function excludeProvidersForQrcodeAttachmentSources(sources) {
+    if (sources.length === 0) {
+        return [];
+    }
+    const allowed = new Set(sources);
+    const excluded = [];
+    if (!allowed.has(DEVICE_SOURCE)) {
+        excluded.push(DEVICE_SOURCE);
+    }
+    if (!allowed.has(DRIVE_SOURCE)) {
+        excluded.push(DRIVE_SOURCE);
+    }
+    return excluded;
+}
+//#endregion
+//#region ---- Refs ----
+function stripPrefix(value, prefix) {
+    return value.startsWith(prefix) ? value.slice(prefix.length).trim() : value;
+}
+/** Owned upload id (`file:` or a bare file-storage id). Shared `link:` and `document:` refs are excluded. */
+function ownedQrcodeAttachmentFileId(value) {
+    const trimmed = value?.trim();
+    if (!trimmed || trimmed.startsWith(AXP_QRCODE_ATTACHMENT_LINK_PREFIX) || trimmed.startsWith(AXP_QRCODE_ATTACHMENT_DOCUMENT_PREFIX)) {
+        return null;
+    }
+    const withoutPrefix = trimmed.startsWith(AXP_QRCODE_ATTACHMENT_FILE_PREFIX)
+        ? stripPrefix(trimmed, AXP_QRCODE_ATTACHMENT_FILE_PREFIX)
+        : trimmed;
+    return isStoredImageFileId(withoutPrefix) ? normalizeStoredImageRef(withoutPrefix) : null;
+}
+/** File id that can be previewed or downloaded. Drive document refs are not file ids. */
+function displayQrcodeAttachmentFileId(value) {
+    const trimmed = value?.trim();
+    if (!trimmed || trimmed.startsWith(AXP_QRCODE_ATTACHMENT_DOCUMENT_PREFIX)) {
+        return null;
+    }
+    if (trimmed.startsWith(AXP_QRCODE_ATTACHMENT_LINK_PREFIX)) {
+        const fileId = stripPrefix(trimmed, AXP_QRCODE_ATTACHMENT_LINK_PREFIX);
+        return isStoredImageFileId(fileId) ? normalizeStoredImageRef(fileId) : null;
+    }
+    return ownedQrcodeAttachmentFileId(trimmed);
+}
+function isSharedDriveQrcodeAttachmentRef(value) {
+    const trimmed = value?.trim() ?? '';
+    if (!trimmed) {
+        return false;
+    }
+    if (trimmed.startsWith(AXP_QRCODE_ATTACHMENT_DOCUMENT_PREFIX)) {
+        return true;
+    }
+    if (!trimmed.startsWith(AXP_QRCODE_ATTACHMENT_LINK_PREFIX)) {
+        return false;
+    }
+    return displayQrcodeAttachmentFileId(trimmed) != null;
+}
+function toOwnedQrcodeAttachmentRef(fileId) {
+    const normalized = normalizeStoredImageRef(fileId) ?? fileId.trim();
+    return `${AXP_QRCODE_ATTACHMENT_FILE_PREFIX}${normalized}`;
+}
+function toSharedFileQrcodeAttachmentRef(fileId) {
+    const normalized = normalizeStoredImageRef(fileId) ?? fileId.trim();
+    return `${AXP_QRCODE_ATTACHMENT_LINK_PREFIX}${normalized}`;
+}
+function toSharedDocumentQrcodeAttachmentRef(documentId) {
+    return `${AXP_QRCODE_ATTACHMENT_DOCUMENT_PREFIX}${documentId.trim()}`;
+}
+function readQrcodeAttachmentRef(data, dataPath) {
+    if (!dataPath?.trim()) {
+        return null;
+    }
+    const value = readPath(data, dataPath.trim());
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    return trimmed || null;
+}
+function readPath(data, path) {
+    return path.split('.').reduce((current, key) => {
+        const record = asRecord(current);
+        if (!record) {
+            return undefined;
+        }
+        return record[key];
+    }, data);
+}
+function qrcodeAttachmentImageUrl(ref, getDownloadUrl) {
+    const fileId = displayQrcodeAttachmentFileId(ref);
+    if (!fileId) {
+        return null;
+    }
+    const url = resolveStoredImageDisplayUrl(fileId, getDownloadUrl);
+    return url || null;
+}
+//#endregion
+//#region ---- Display and field patch ----
+function resolveQrcodeDisplayMode(input) {
+    if (input.enabled && !!input.attachmentRef?.trim()) {
+        return 'image';
+    }
+    if (typeof input.qrValue === 'string' && input.qrValue.trim()) {
+        return 'qr';
+    }
+    return 'empty';
+}
+/**
+ * Writes the attachment ref onto its own field.
+ * Throws when the path is missing or is the QR value path, so a file id cannot replace the QR text.
+ */
+function buildQrcodeAttachmentContextPatch(dataPath, qrPath, nextRef) {
+    const path = dataPath.trim();
+    const qr = qrPath.trim();
+    if (!path || path === qr) {
+        throw new Error('QR attachment dataPath must be a separate field from the QR value.');
+    }
+    return { [path]: nextRef };
+}
+function isQrcodeContentReadonly(options) {
+    return !!options?.['readonly'];
+}
+/**
+ * Attachment lock. QR-content readonly is intentionally not an input:
+ * a readonly QR payload can still accept an image unless attachment readonly, form lock, or view mode says otherwise.
+ */
+function isQrcodeAttachmentReadonly(input) {
+    if (input.mode === 'view') {
+        return true;
+    }
+    return !!(input.attachmentReadonly || input.formLocked || input.disabled);
+}
+//#endregion
+//#region ---- Chooser and storage target ----
+function isCancelledQrcodeAttachmentChoice(items) {
+    return !items || items.length === 0;
+}
+function interpretQrcodeChooserItems(items) {
+    const item = items?.[0];
+    if (!item) {
+        return { kind: 'cancel' };
+    }
+    const kind = item.source?.kind;
+    const value = item.source?.value;
+    if (kind === 'blob') {
+        return { kind: 'upload' };
+    }
+    if (kind === 'fileId' && typeof value === 'string' && isStoredImageFileId(value)) {
+        return { kind: 'shared-file', fileId: normalizeStoredImageRef(value) ?? value.trim() };
+    }
+    if (kind === 'reference') {
+        const reference = asRecord(value);
+        const documentId = readString(reference?.['id']) ?? readString(item.id);
+        const type = readString(reference?.['type']);
+        if (documentId && (type === 'document' || type == null)) {
+            return { kind: 'shared-document', documentId };
+        }
+    }
+    return { kind: 'cancel' };
+}
+function resolveQrcodeAttachmentStorageTarget(input) {
+    const configuredRefId = input.fileStorage?.refId?.trim();
+    const entityId = typeof input.entityId === 'string' ? input.entityId.trim() : '';
+    return {
+        refId: configuredRefId || entityId || AXP_QRCODE_ATTACHMENT_PENDING_REF_ID,
+        refType: input.fileStorage?.refType?.trim() || AXP_QRCODE_ATTACHMENT_DEFAULT_REF_TYPE,
+        category: input.fileStorage?.category?.trim() || AXP_QRCODE_ATTACHMENT_DEFAULT_CATEGORY,
+    };
+}
+//#endregion
+//#region ---- Replace, remove, and release ----
+function planQrcodeAttachmentReplacement(currentRef, nextRef) {
+    const owned = ownedQrcodeAttachmentFileId(currentRef);
+    return {
+        nextRef,
+        supersededOwnedFileIds: owned ? [owned] : [],
+    };
+}
+function planQrcodeAttachmentRemoval(currentRef) {
+    const owned = ownedQrcodeAttachmentFileId(currentRef);
+    return {
+        nextRef: null,
+        supersededOwnedFileIds: owned ? [owned] : [],
+    };
+}
+/**
+ * Owned file ids to mark for deletion.
+ * While the form is still dirty, nothing is released.
+ * Shared Drive refs are never included.
+ * The saved reference is always kept, including when the user discards a replacement.
+ */
+function fileIdsToRelease(input) {
+    const savedId = ownedQrcodeAttachmentFileId(input.savedRef);
+    const currentId = ownedQrcodeAttachmentFileId(input.currentRef);
+    const settled = (input.currentRef ?? null) === (input.savedRef ?? null);
+    if (!input.abandoning && !settled) {
+        return [];
+    }
+    const keep = new Set();
+    if (savedId) {
+        keep.add(savedId);
+    }
+    if (!input.abandoning && currentId) {
+        keep.add(currentId);
+    }
+    const candidates = [...input.uploadedFileIds, ...input.supersededOwnedFileIds];
+    const released = [];
+    for (const id of candidates) {
+        if (!id || keep.has(id) || released.includes(id)) {
+            continue;
+        }
+        if (!isStoredImageFileId(id)) {
+            continue;
+        }
+        released.push(normalizeStoredImageRef(id) ?? id);
+    }
+    return released;
+}
+//#endregion
 
 //#region ---- Imports ----
 //#endregion
@@ -14971,6 +15515,10 @@ function buildQrcodeViewerOpenOptions(params) {
     const resolvedLevel = (typeof levelOption === 'string'
         ? levelOption
         : levelOption?.id) ?? 'M';
+    const attachment = resolveQrcodeAttachmentConfig(params.widgetOptions);
+    const attachmentRef = attachment.enabled
+        ? (params.attachmentRef ?? readQrcodeAttachmentRef(params.data, attachment.dataPath))
+        : null;
     return {
         content: params.content,
         title: title || params.fallbackTitleKey,
@@ -14978,14 +15526,17 @@ function buildQrcodeViewerOpenOptions(params) {
         level: resolvedLevel,
         color: params.widgetOptions['color'] ?? '#000000',
         outputType: params.widgetOptions['outputType'] ?? 'svg',
+        attachmentRef,
+        attachmentDataPath: attachment.enabled ? attachment.dataPath : undefined,
     };
 }
 async function openQrcodeViewer(viewer, params) {
-    const content = params.content?.trim();
-    if (!content) {
+    const content = params.content?.trim() ?? '';
+    const options = buildQrcodeViewerOpenOptions({ ...params, content });
+    if (!content && !options.attachmentRef?.trim()) {
         return;
     }
-    await viewer.open(buildQrcodeViewerOpenOptions({ ...params, content }));
+    await viewer.open(options);
 }
 //#endregion
 
@@ -14997,58 +15548,97 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.qrcodeViewer = inject(AXPQrcodeViewerService);
         this.formatService = inject(AXFormatService);
         this.translation = inject(AXTranslationService);
+        this.fileStorage = inject(AXPFileStorageService, { optional: true });
+        //#endregion
+        //#region ---- State Signals ----
+        this.imageUrl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.blobObjectUrl = null;
+        this.hydrateRequestId = 0;
+    }
+    //#endregion
+    //#region ---- Derived State ----
+    attachmentConfig() {
+        return resolveQrcodeAttachmentConfig((this.options ?? {}));
+    }
+    attachmentRef() {
+        const config = this.attachmentConfig();
+        if (!config.enabled) {
+            return null;
+        }
+        return readQrcodeAttachmentRef(this.rowData, config.dataPath);
+    }
+    displayMode() {
+        return resolveQrcodeDisplayMode({
+            enabled: this.attachmentConfig().enabled,
+            attachmentRef: this.attachmentRef(),
+            qrValue: this.rawValue,
+        });
+    }
+    //#endregion
+    //#region ---- Lifecycle ----
+    ngOnChanges() {
+        void this.hydrateImageUrl(this.displayMode() === 'image' ? this.attachmentRef() : null);
+    }
+    ngOnDestroy() {
+        this.revokeBlobUrl();
     }
     //#endregion
     //#region ---- UI Handlers ----
     async showPopup() {
-        const contentValue = this.rawValue;
-        if (!contentValue) {
+        const contentValue = this.rawValue ?? '';
+        if (!contentValue && this.displayMode() !== 'image') {
             return;
         }
         await openQrcodeViewer(this.qrcodeViewer, {
             content: contentValue,
             data: this.rowData,
-            widgetOptions: { ...this.options, size: 500 },
+            widgetOptions: { ...(this.options ?? {}), size: 500 },
             formatService: this.formatService,
             activeLang: this.translation.getActiveLang(),
+            attachmentRef: this.attachmentRef(),
         });
     }
+    //#endregion
+    //#region ---- Image Hydration ----
+    async hydrateImageUrl(ref) {
+        const requestId = ++this.hydrateRequestId;
+        this.revokeBlobUrl();
+        if (!ref || !this.fileStorage) {
+            this.imageUrl.set(null);
+            return;
+        }
+        try {
+            const displayUrl = qrcodeAttachmentImageUrl(ref, (fileId) => this.fileStorage.getDownloadUrl(fileId));
+            if (requestId !== this.hydrateRequestId) {
+                if (displayUrl?.startsWith('blob:')) {
+                    URL.revokeObjectURL(displayUrl);
+                }
+                return;
+            }
+            if (displayUrl?.startsWith('blob:')) {
+                this.blobObjectUrl = displayUrl;
+            }
+            this.imageUrl.set(displayUrl);
+        }
+        catch {
+            if (requestId === this.hydrateRequestId) {
+                this.imageUrl.set(null);
+            }
+        }
+    }
+    revokeBlobUrl() {
+        if (this.blobObjectUrl) {
+            URL.revokeObjectURL(this.blobObjectUrl);
+            this.blobObjectUrl = null;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetColumnComponent, isStandalone: true, selector: "axp-qrcode-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
-    <div class="flex items-center gap-2">
-      @if (rawValue) {
-        <ax-button class="ax-sm" look="twotone" color="default" (click)="showPopup()">
-          <ax-icon>
-            <i class="fa-regular fa-qrcode"></i>
-          </ax-icon>
-        </ax-button>
-      } @else {
-        <span>-</span>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetColumnComponent, isStandalone: true, selector: "axp-qrcode-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\n  <!-- ----- Attached image preview when the row stores a QR image ----- -->\n  @if (displayMode() === 'image') {\n    <button\n      type=\"button\"\n      class=\"inline-flex shrink-0 overflow-hidden cursor-pointer border border-border-light-surface bg-transparent p-0\"\n      style=\"width: 40px; height: 40px; border-radius: 4px\"\n      (click)=\"showPopup()\"\n    >\n      <!-- ----- Thumbnail of the stored image ----- -->\n      @if (imageUrl()) {\n        <img [src]=\"imageUrl()!\" alt=\"\" class=\"size-full object-contain\" style=\"border-radius: 4px\" />\n      }\n    </button>\n  }\n  <!-- ----- Generated QR preview when no attachment image is stored ----- -->\n  @else if (rawValue) {\n    <ax-button class=\"ax-sm\" look=\"twotone\" color=\"default\" (click)=\"showPopup()\">\n      <ax-icon>\n        <i class=\"fa-regular fa-qrcode\"></i>\n      </ax-icon>\n    </ax-button>\n  } @else {\n    <span>-</span>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetColumnComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-qrcode-widget-column',
-                    imports: [AXButtonModule, AXDecoratorModule],
-                    template: `
-    <div class="flex items-center gap-2">
-      @if (rawValue) {
-        <ax-button class="ax-sm" look="twotone" color="default" (click)="showPopup()">
-          <ax-icon>
-            <i class="fa-regular fa-qrcode"></i>
-          </ax-icon>
-        </ax-button>
-      } @else {
-        <span>-</span>
-      }
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['rawValue', 'rowData'],
-                }]
+            args: [{ selector: 'axp-qrcode-widget-column', imports: [AXButtonModule, AXDecoratorModule], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['rawValue', 'rowData'], template: "<div class=\"flex items-center gap-2\">\n  <!-- ----- Attached image preview when the row stores a QR image ----- -->\n  @if (displayMode() === 'image') {\n    <button\n      type=\"button\"\n      class=\"inline-flex shrink-0 overflow-hidden cursor-pointer border border-border-light-surface bg-transparent p-0\"\n      style=\"width: 40px; height: 40px; border-radius: 4px\"\n      (click)=\"showPopup()\"\n    >\n      <!-- ----- Thumbnail of the stored image ----- -->\n      @if (imageUrl()) {\n        <img [src]=\"imageUrl()!\" alt=\"\" class=\"size-full object-contain\" style=\"border-radius: 4px\" />\n      }\n    </button>\n  }\n  <!-- ----- Generated QR preview when no attachment image is stored ----- -->\n  @else if (rawValue) {\n    <ax-button class=\"ax-sm\" look=\"twotone\" color=\"default\" (click)=\"showPopup()\">\n      <ax-icon>\n        <i class=\"fa-regular fa-qrcode\"></i>\n      </ax-icon>\n    </ax-button>\n  } @else {\n    <span>-</span>\n  }\n</div>\n" }]
         }] });
 
 var qrcodeWidgetColumn_component = /*#__PURE__*/Object.freeze({
@@ -15058,11 +15648,19 @@ var qrcodeWidgetColumn_component = /*#__PURE__*/Object.freeze({
 
 class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
+        super();
         //#region ---- Services & Dependencies ----
         this.qrcodeViewer = inject(AXPQrcodeViewerService);
         this.formatService = inject(AXFormatService);
         this.translation = inject(AXTranslationService);
+        this.fileChooser = inject(AXPFileChooserService);
+        this.fileStorage = inject(AXPFileStorageService);
+        this.toast = inject(AXToastService);
+        //#endregion
+        //#region ---- Attachment Session ----
+        this.uploadedFileIds = new Set();
+        this.supersededOwnedFileIds = new Set();
+        this.releasing = false;
         //#endregion
         this.value = computed(() => this.getValue(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -15085,6 +15683,58 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'] ?? '@general:terms.common.placeholder', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.attachmentConfig = computed(() => resolveQrcodeAttachmentConfig(this.options()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachmentConfig" }] : /* istanbul ignore next */ []));
+        this.attachmentRef = computed(() => {
+            const config = this.attachmentConfig();
+            if (!config.enabled) {
+                return null;
+            }
+            return readQrcodeAttachmentRef(this.contextService.data(), config.dataPath);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachmentRef" }] : /* istanbul ignore next */ []));
+        this.displayMode = computed(() => resolveQrcodeDisplayMode({
+            enabled: this.attachmentConfig().enabled,
+            attachmentRef: this.attachmentRef(),
+            qrValue: this.value(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+        this.imageUrl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.blobObjectUrl = null;
+        this.hydrateRequestId = 0;
+        this.choosingAttachment = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "choosingAttachment" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            void this.hydrateImageUrl(this.displayMode() === 'image' ? this.attachmentRef() : null);
+        });
+        effect(() => {
+            const config = this.attachmentConfig();
+            if (!config.enabled || !config.dataPath) {
+                return;
+            }
+            const currentRef = readQrcodeAttachmentRef(this.contextService.data(), config.dataPath);
+            const savedRef = readQrcodeAttachmentRef(this.contextService.saved(), config.dataPath);
+            void this.releaseOwnedFiles(currentRef, savedRef, false);
+        });
+    }
+    ngOnDestroy() {
+        this.revokeBlobUrl();
+        const config = this.attachmentConfig();
+        if (!config.enabled || !config.dataPath) {
+            return;
+        }
+        const currentRef = readQrcodeAttachmentRef(this.contextService.data(), config.dataPath);
+        const savedRef = readQrcodeAttachmentRef(this.contextService.saved(), config.dataPath);
+        void this.releaseOwnedFiles(currentRef, savedRef, currentRef !== savedRef);
+    }
+    attachmentActionsLocked() {
+        return isQrcodeAttachmentReadonly({
+            attachmentReadonly: this.attachmentConfig().readonly,
+            formLocked: isAncestorFormLocked(this),
+            disabled: !!this.options()['disabled'],
+            mode: this.mode,
+        });
     }
     onValueChange(e) {
         if (e.isUserInteraction) {
@@ -15106,8 +15756,8 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         this.draft.set(this.value() ?? '');
     }
     async openPreview() {
-        const content = this.value();
-        if (!content) {
+        const content = this.value() ?? '';
+        if (!content && this.displayMode() !== 'image') {
             return;
         }
         await openQrcodeViewer(this.qrcodeViewer, {
@@ -15116,6 +15766,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
             widgetOptions: this.options(),
             formatService: this.formatService,
             activeLang: this.translation.getActiveLang(),
+            attachmentRef: this.attachmentRef(),
         });
     }
     downloadQr(el) {
@@ -15127,9 +15778,78 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
             fallbackSize: this.size(),
         });
     }
+    async downloadDisplayed(el) {
+        const fileId = displayQrcodeAttachmentFileId(this.attachmentRef());
+        if (this.displayMode() === 'image' && fileId) {
+            try {
+                const blob = await this.fileStorage.download(fileId);
+                const extension = blob.type === 'image/jpeg' ? 'jpg' : blob.type === 'image/webp' ? 'webp' : 'png';
+                triggerBrowserDownload(blob, `qrcode-image.${extension}`);
+            }
+            catch {
+                await this.notifyGenericError();
+            }
+            return;
+        }
+        this.downloadQr(el);
+    }
     clearValue() {
         this.setValue('');
     }
+    async chooseAttachment() {
+        if (this.attachmentActionsLocked() || this.choosingAttachment()) {
+            return;
+        }
+        const config = this.attachmentConfig();
+        if (!config.enabled || !config.dataPath) {
+            return;
+        }
+        this.choosingAttachment.set(true);
+        try {
+            const items = await this.fileChooser.promptChoose({
+                options: {
+                    multiple: false,
+                    accept: AXP_IMAGE_FILE_CHOOSER_ACCEPT,
+                    excludeProviders: excludeProvidersForQrcodeAttachmentSources(config.sources),
+                    attachmentType: 'clone',
+                },
+                items: [],
+            });
+            if (isCancelledQrcodeAttachmentChoice(items)) {
+                return;
+            }
+            const interpretation = interpretQrcodeChooserItems(items);
+            if (interpretation.kind === 'cancel') {
+                return;
+            }
+            if (interpretation.kind === 'upload') {
+                const file = fileListItemToImageFile(items[0]);
+                if (!file) {
+                    return;
+                }
+                await this.uploadAttachment(file, config);
+                return;
+            }
+            if (interpretation.kind === 'shared-file') {
+                this.applyAttachmentRef(toSharedFileQrcodeAttachmentRef(interpretation.fileId), config);
+                return;
+            }
+            this.applyAttachmentRef(toSharedDocumentQrcodeAttachmentRef(interpretation.documentId), config);
+        }
+        finally {
+            this.choosingAttachment.set(false);
+        }
+    }
+    removeAttachment() {
+        if (this.attachmentActionsLocked()) {
+            return;
+        }
+        const config = this.attachmentConfig();
+        if (!config.enabled) {
+            return;
+        }
+        this.applyAttachmentRef(null, config);
+    }
     async onFileSelected(e) {
         const input = e.target;
         const file = input?.files && input.files.length > 0 ? input.files[0] : null;
@@ -15146,8 +15866,142 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "block flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"flex flex-col gap-3 p-3 w-fit\">\n  <div class=\"flex justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"bg-lightest border border-default rounded-md shadow-md p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"flex flex-col items-center justify-center text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"text-4xl text-gray-400 mb-3\"></ax-icon>\n          <div class=\"text-sm text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"flex items-center justify-between gap-2 pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"bg-lightest border border-default rounded-md shadow-md p-5 w-full sm:w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"flex justify-end gap-2 mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    //#region ---- Attachment Persistence ----
+    async uploadAttachment(file, config) {
+        const entityId = this.contextService.data()['id'];
+        const target = resolveQrcodeAttachmentStorageTarget({
+            entityId,
+            fileStorage: config.fileStorage,
+        });
+        let fileId;
+        try {
+            const info = await this.fileStorage.save({
+                file,
+                name: file.name || 'qrcode-image.png',
+                refId: target.refId,
+                refType: target.refType,
+                category: target.category,
+                status: AXPFileStorageStatus.Temporary,
+            });
+            fileId = info.fileId?.trim();
+            if (!fileId) {
+                throw new Error('File storage did not return a fileId.');
+            }
+            await this.fileStorage.commit(fileId);
+            this.uploadedFileIds.add(fileId);
+            this.applyAttachmentRef(toOwnedQrcodeAttachmentRef(fileId), config);
+        }
+        catch {
+            if (fileId) {
+                this.uploadedFileIds.delete(fileId);
+                try {
+                    await this.fileStorage.markForDeletion(fileId);
+                }
+                catch {
+                    // The failed upload is already unusable; keep the current QR image.
+                }
+            }
+            await this.notifyUploadFailed();
+        }
+    }
+    applyAttachmentRef(nextRef, config) {
+        const dataPath = config.dataPath;
+        if (!dataPath) {
+            return;
+        }
+        const qrPath = this.fullPath() ?? '';
+        let patch;
+        try {
+            patch = buildQrcodeAttachmentContextPatch(dataPath, qrPath, nextRef);
+        }
+        catch {
+            return;
+        }
+        const previousRef = readQrcodeAttachmentRef(this.contextService.data(), dataPath);
+        const plan = nextRef
+            ? planQrcodeAttachmentReplacement(previousRef, nextRef)
+            : planQrcodeAttachmentRemoval(previousRef);
+        for (const id of plan.supersededOwnedFileIds) {
+            this.supersededOwnedFileIds.add(id);
+        }
+        const [path, value] = Object.entries(patch)[0];
+        this.contextService.update(path, value, { origin: 'user' });
+    }
+    async releaseOwnedFiles(currentRef, savedRef, abandoning) {
+        if (this.releasing) {
+            return;
+        }
+        const ids = fileIdsToRelease({
+            savedRef,
+            currentRef,
+            uploadedFileIds: [...this.uploadedFileIds],
+            supersededOwnedFileIds: [...this.supersededOwnedFileIds],
+            abandoning,
+        });
+        if (ids.length === 0) {
+            return;
+        }
+        this.releasing = true;
+        try {
+            for (const id of ids) {
+                this.uploadedFileIds.delete(id);
+                this.supersededOwnedFileIds.delete(id);
+                try {
+                    await this.fileStorage.markForDeletion(id);
+                }
+                catch {
+                    // Leave the id out of the session so a later save does not retry a shared file.
+                }
+            }
+        }
+        finally {
+            this.releasing = false;
+        }
+    }
+    async hydrateImageUrl(ref) {
+        const requestId = ++this.hydrateRequestId;
+        this.revokeBlobUrl();
+        if (!ref) {
+            this.imageUrl.set(null);
+            return;
+        }
+        try {
+            const displayUrl = qrcodeAttachmentImageUrl(ref, (fileId) => this.fileStorage.getDownloadUrl(fileId));
+            if (requestId !== this.hydrateRequestId) {
+                if (displayUrl?.startsWith('blob:')) {
+                    URL.revokeObjectURL(displayUrl);
+                }
+                return;
+            }
+            if (displayUrl?.startsWith('blob:')) {
+                this.blobObjectUrl = displayUrl;
+            }
+            this.imageUrl.set(displayUrl);
+        }
+        catch {
+            if (requestId === this.hydrateRequestId) {
+                this.imageUrl.set(null);
+            }
+        }
+    }
+    revokeBlobUrl() {
+        if (this.blobObjectUrl) {
+            URL.revokeObjectURL(this.blobObjectUrl);
+            this.blobObjectUrl = null;
+        }
+    }
+    async notifyUploadFailed() {
+        const title = await this.translation.translateAsync('@general:messages.generic.error.title');
+        const content = await this.translation.translateAsync('@general:widgets.file-uploader.messages.upload-failed');
+        this.toast.show({ color: 'danger', title, content });
+    }
+    async notifyGenericError() {
+        const title = await this.translation.translateAsync('@general:messages.generic.error.title');
+        const content = await this.translation.translateAsync('@general:messages.generic.error.description');
+        this.toast.show({ color: 'danger', title, content });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "block flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"flex flex-col gap-3 p-3 w-fit\">\n  <div class=\"flex justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"bg-lightest border border-default rounded-md shadow-md p-3\" #qr>\n      <!-- QR image when an attachment is stored; otherwise the generated QR -->\n      @if (displayMode() === 'image') {\n        <!-- ----- Show the stored image at the widget size without cropping ----- -->\n        @if (imageUrl()) {\n          <img\n            [src]=\"imageUrl()!\"\n            [attr.alt]=\"('@platform-layout-widgets:widgets.qrcode.attachment.alt' | translate | async) ?? ''\"\n            class=\"object-contain\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          />\n        } @else {\n          <div\n            class=\"flex items-center justify-center\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          ></div>\n        }\n      } @else if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"flex flex-col items-center justify-center text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"text-4xl text-gray-400 mb-3\"></ax-icon>\n          <div class=\"text-sm text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly() || attachmentConfig().enabled) {\n        <div class=\"flex items-center justify-between gap-2 pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          @if (!readonly()) {\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"bg-lightest border border-default rounded-md shadow-md p-5 w-full sm:w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"flex justify-end gap-2 mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n          }\n\n          <!-- Upload or replace the optional QR image without changing the QR text -->\n          @if (attachmentConfig().enabled && !attachmentActionsLocked()) {\n            <ax-button\n              look=\"twotone\"\n              [disabled]=\"choosingAttachment()\"\n              [title]=\"\n                ((displayMode() === 'image'\n                  ? '@platform-layout-widgets:widgets.qrcode.attachment.replace'\n                  : '@platform-layout-widgets:widgets.qrcode.attachment.upload'\n                ) | translate | async)!\n              \"\n              (onClick)=\"chooseAttachment()\"\n            >\n              <ax-icon [icon]=\"displayMode() === 'image' ? 'fa-light fa-arrows-rotate' : 'fa-light fa-image'\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Preview and export follow whichever image is currently displayed -->\n          @if (displayMode() !== 'empty') {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadDisplayed(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Remove the attached image and show the generated QR again -->\n          @if (attachmentConfig().enabled && !attachmentActionsLocked() && displayMode() === 'image') {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@platform-layout-widgets:widgets.qrcode.attachment.remove' | translate | async)!\"\n              (onClick)=\"removeAttachment()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-image-slash\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -15160,8 +16014,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                         AsyncPipe,
                         FormsModule,
-                    ], host: { class: 'block flex-1' }, template: "<!-- Main Container -->\n<div class=\"flex flex-col gap-3 p-3 w-fit\">\n  <div class=\"flex justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"bg-lightest border border-default rounded-md shadow-md p-3\" #qr>\n      <!-- QR Code Display or Empty Placeholder -->\n      @if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"flex flex-col items-center justify-center text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"text-4xl text-gray-400 mb-3\"></ax-icon>\n          <div class=\"text-sm text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly()) {\n        <div class=\"flex items-center justify-between gap-2 pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"bg-lightest border border-default rounded-md shadow-md p-5 w-full sm:w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"flex justify-end gap-2 mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Export Button: Download QR code as image (only shown when value exists) -->\n          @if (value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadQr(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }] });
+                    ], host: { class: 'block flex-1' }, template: "<!-- Main Container -->\n<div class=\"flex flex-col gap-3 p-3 w-fit\">\n  <div class=\"flex justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"bg-lightest border border-default rounded-md shadow-md p-3\" #qr>\n      <!-- QR image when an attachment is stored; otherwise the generated QR -->\n      @if (displayMode() === 'image') {\n        <!-- ----- Show the stored image at the widget size without cropping ----- -->\n        @if (imageUrl()) {\n          <img\n            [src]=\"imageUrl()!\"\n            [attr.alt]=\"('@platform-layout-widgets:widgets.qrcode.attachment.alt' | translate | async) ?? ''\"\n            class=\"object-contain\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          />\n        } @else {\n          <div\n            class=\"flex items-center justify-center\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          ></div>\n        }\n      } @else if (value()) {\n        <!-- Display QR Code when value exists -->\n        <ax-qrcode [content]=\"value()\" [size]=\"size()\" [color]=\"color()\" [level]=\"level()\" [outputType]=\"'svg'\">\n        </ax-qrcode>\n      } @else {\n        <!-- Empty State: Show placeholder when value is null or empty -->\n        <div\n          class=\"flex flex-col items-center justify-center text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"text-4xl text-gray-400 mb-3\"></ax-icon>\n          <div class=\"text-sm text-gray-500\">\n            {{ '@general:state-message.empty.title' | translate | async }}\n          </div>\n        </div>\n      }\n\n      <!-- Action Buttons Section -->\n      @if (!readonly() || attachmentConfig().enabled) {\n        <div class=\"flex items-center justify-between gap-2 pt-4\">\n          <!-- Edit Button: Opens popover to edit QR code content -->\n          @if (!readonly()) {\n          <ax-button\n            #editBtn\n            look=\"twotone\"\n            [title]=\"('@general:actions.edit.title' | translate | async)!\"\n            (onClick)=\"beginEdit()\"\n          >\n            <!-- Edit Popover: Text input for editing QR code content -->\n            <ax-popover #po [target]=\"editBtn\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n              <div\n                class=\"bg-lightest border border-default rounded-md shadow-md p-5 w-full sm:w-96\"\n              >\n                <!-- Text Input for QR Code Content -->\n                <ax-text-box\n                  [value]=\"draft()\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  [placeholder]=\"placeholder() | translate | async\"\n                  (onValueChanged)=\"onDraftChange($event)\"\n                >\n                  @if (hasClearButton()) {\n                    <ax-clear-button></ax-clear-button>\n                  }\n                </ax-text-box>\n                <!-- Popover Action Buttons -->\n                <div class=\"flex justify-end gap-2 mt-3\">\n                  <ax-button\n                    look=\"outline\"\n                    class=\"ax-sm\"\n                    [text]=\"('@general:actions.cancel.title' | translate | async)!\"\n                    (onClick)=\"cancelEdit(); po.close()\"\n                  ></ax-button>\n                  <ax-button\n                    look=\"solid\"\n                    class=\"ax-sm\"\n                    color=\"primary\"\n                    [text]=\"('@general:actions.submit.title' | translate | async)!\"\n                    (onClick)=\"applyDraft(); po.close()\"\n                  ></ax-button>\n                </div>\n              </div>\n            </ax-popover>\n            <ax-icon icon=\"fa-light fa-pen\"></ax-icon>\n          </ax-button>\n          }\n\n          <!-- Upload or replace the optional QR image without changing the QR text -->\n          @if (attachmentConfig().enabled && !attachmentActionsLocked()) {\n            <ax-button\n              look=\"twotone\"\n              [disabled]=\"choosingAttachment()\"\n              [title]=\"\n                ((displayMode() === 'image'\n                  ? '@platform-layout-widgets:widgets.qrcode.attachment.replace'\n                  : '@platform-layout-widgets:widgets.qrcode.attachment.upload'\n                ) | translate | async)!\n              \"\n              (onClick)=\"chooseAttachment()\"\n            >\n              <ax-icon [icon]=\"displayMode() === 'image' ? 'fa-light fa-arrows-rotate' : 'fa-light fa-image'\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Upload Button: Upload text file to set QR code content -->\n          <!-- <ax-button\n            look=\"twotone\"\n            [title]=\"('@general:actions.upload.title' | translate | async)!\"\n            (onClick)=\"fileInput.click()\"\n          >\n            <input #fileInput type=\"file\" accept=\"text/plain\" class=\"hidden\" (change)=\"onFileSelected($event)\" />\n            <ax-icon icon=\"fa-light fa-upload\"></ax-icon>\n          </ax-button> -->\n\n          <!-- Preview and export follow whichever image is currently displayed -->\n          @if (displayMode() !== 'empty') {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.preview.title' | translate | async)!\"\n              (onClick)=\"openPreview()\"\n            >\n              <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n            </ax-button>\n\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.export.title' | translate | async)!\"\n              (onClick)=\"downloadDisplayed(qr)\"\n            >\n              <ax-icon icon=\"fa-light fa-download\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Remove the attached image and show the generated QR again -->\n          @if (attachmentConfig().enabled && !attachmentActionsLocked() && displayMode() === 'image') {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@platform-layout-widgets:widgets.qrcode.attachment.remove' | translate | async)!\"\n              (onClick)=\"removeAttachment()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-image-slash\"></ax-icon>\n            </ax-button>\n          }\n\n          <!-- Delete Button: Clear QR code value (only shown when not readonly and value exists) -->\n          @if (!readonly() && value()) {\n            <ax-button\n              look=\"twotone\"\n              [title]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"clearValue()\"\n            >\n              <ax-icon icon=\"text-danger fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+function isAncestorFormLocked(start) {
+    let current = start?.parent;
+    while (current) {
+        if (current.options?.()?.['readonly'] === true) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
 
 var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -15169,12 +16033,15 @@ var qrcodeWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
+    //#endregion
+    //#region ---- Lifecycle ----
     constructor() {
-        super(...arguments);
+        super();
         //#region ---- Services & Dependencies ----
         this.qrcodeViewer = inject(AXPQrcodeViewerService);
         this.formatService = inject(AXFormatService);
         this.translation = inject(AXTranslationService);
+        this.fileStorage = inject(AXPFileStorageService, { optional: true });
         //#endregion
         //#region ---- View Children ----
         this.qrContainer = viewChild('qrContainer', /* @ts-ignore */
@@ -15191,14 +16058,44 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
         this.showContent = computed(() => !!this.options()['showContent'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showContent" }] : /* istanbul ignore next */ []));
+        this.suppressPreview = computed(() => !!this.options()['suppressPreview'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suppressPreview" }] : /* istanbul ignore next */ []));
         this.contentLabel = computed(() => this.options()['contentLabel'] ?? '@platform-layout-widgets:widgets.qrcode.content', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentLabel" }] : /* istanbul ignore next */ []));
+        this.attachmentConfig = computed(() => resolveQrcodeAttachmentConfig(this.options()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachmentConfig" }] : /* istanbul ignore next */ []));
+        this.attachmentRef = computed(() => {
+            const config = this.attachmentConfig();
+            if (!config.enabled) {
+                return null;
+            }
+            return readQrcodeAttachmentRef(this.contextService.data(), config.dataPath);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachmentRef" }] : /* istanbul ignore next */ []));
+        this.displayMode = computed(() => resolveQrcodeDisplayMode({
+            enabled: this.attachmentConfig().enabled,
+            attachmentRef: this.attachmentRef(),
+            qrValue: this.getValue(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- State Signals ----
+        this.imageUrl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.blobObjectUrl = null;
+        this.hydrateRequestId = 0;
+        effect(() => {
+            void this.hydrateImageUrl(this.displayMode() === 'image' ? this.attachmentRef() : null);
+        });
+    }
+    ngOnDestroy() {
+        this.revokeBlobUrl();
     }
     //#endregion
     //#region ---- UI Handlers ----
     async openPreview() {
-        const content = this.getValue();
-        if (!content) {
+        const content = this.getValue() ?? '';
+        if (!content && this.displayMode() !== 'image') {
             return;
         }
         await openQrcodeViewer(this.qrcodeViewer, {
@@ -15207,6 +16104,7 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
             widgetOptions: this.options(),
             formatService: this.formatService,
             activeLang: this.translation.getActiveLang(),
+            attachmentRef: this.attachmentRef(),
         });
     }
     //#endregion
@@ -15219,85 +16117,53 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
                     printGraphicFromElement(container, {
                         fallbackSize: this.size(),
                         title: 'QR Code',
-                        imageAlt: 'QR Code',
+                        imageAlt: 'QR Image',
                     });
                 }
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "qrContainer", first: true, predicate: ["qrContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (getValue()) {
-      <div class="flex w-full flex-col items-center gap-4 text-center">
-        <div #qrContainer class="inline-block">
-          <ax-qrcode
-            [content]="getValue()"
-            [size]="size()"
-            [color]="color()"
-            [level]="level()"
-            [outputType]="outputType()"
-          >
-          </ax-qrcode>
-        </div>
-        @if (showContent()) {
-          <div class="flex max-w-full flex-col items-center gap-1">
-            <span class="text-sm font-medium">{{ contentLabel() | translate | async }}</span>
-            <span class="break-all text-sm">{{ getValue() }}</span>
-          </div>
-        } @else {
-          <ax-button
-            look="twotone"
-            class="ax-sm"
-            [title]="('@general:actions.preview.title' | translate | async)!"
-            (onClick)="openPreview()"
-          >
-            <ax-icon icon="fa-light fa-expand"></ax-icon>
-          </ax-button>
+    //#endregion
+    //#region ---- Image Hydration ----
+    async hydrateImageUrl(ref) {
+        const requestId = ++this.hydrateRequestId;
+        this.revokeBlobUrl();
+        if (!ref || !this.fileStorage) {
+            this.imageUrl.set(null);
+            return;
+        }
+        try {
+            const displayUrl = qrcodeAttachmentImageUrl(ref, (fileId) => this.fileStorage.getDownloadUrl(fileId));
+            if (requestId !== this.hydrateRequestId) {
+                if (displayUrl?.startsWith('blob:')) {
+                    URL.revokeObjectURL(displayUrl);
+                }
+                return;
+            }
+            if (displayUrl?.startsWith('blob:')) {
+                this.blobObjectUrl = displayUrl;
+            }
+            this.imageUrl.set(displayUrl);
+        }
+        catch {
+            if (requestId === this.hydrateRequestId) {
+                this.imageUrl.set(null);
+            }
+        }
+    }
+    revokeBlobUrl() {
+        if (this.blobObjectUrl) {
+            URL.revokeObjectURL(this.blobObjectUrl);
+            this.blobObjectUrl = null;
         }
-      </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQrcodeWidgetViewComponent, isStandalone: true, selector: "axp-qrcode-widget", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "qrContainer", first: true, predicate: ["qrContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (displayMode() !== 'empty') {\n  <div class=\"flex w-full flex-col items-center gap-4 text-center\">\n    <div #qrContainer class=\"inline-block\">\n      <!-- ----- Attached image replaces the generated QR while a file is stored ----- -->\n      @if (displayMode() === 'image') {\n        <!-- ----- Show the stored image at the widget size without cropping ----- -->\n        @if (imageUrl()) {\n          <img\n            [src]=\"imageUrl()!\"\n            [attr.alt]=\"('@platform-layout-widgets:widgets.qrcode.attachment.alt' | translate | async) ?? ''\"\n            class=\"object-contain\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          />\n        } @else {\n          <div\n            class=\"flex items-center justify-center\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          ></div>\n        }\n      } @else {\n        <ax-qrcode\n          [content]=\"getValue()\"\n          [size]=\"size()\"\n          [color]=\"color()\"\n          [level]=\"level()\"\n          [outputType]=\"outputType()\"\n        >\n        </ax-qrcode>\n      }\n    </div>\n    <!-- ----- QR text under the generated code ----- -->\n    @if (displayMode() === 'qr' && showContent()) {\n      <div class=\"flex max-w-full flex-col items-center gap-1\">\n        <span class=\"text-sm font-medium\">{{ contentLabel() | translate | async }}</span>\n        <span class=\"break-all text-sm\">{{ getValue() }}</span>\n      </div>\n    }\n    <!-- ----- Preview for the attached image or the generated QR ----- -->\n    @else if (!suppressPreview() && (displayMode() === 'image' || !showContent())) {\n      <ax-button\n        look=\"twotone\"\n        class=\"ax-sm\"\n        [title]=\"('@general:actions.preview.title' | translate | async)!\"\n        (onClick)=\"openPreview()\"\n      >\n        <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n      </ax-button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "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: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-qrcode-widget',
-                    template: `
-    @if (getValue()) {
-      <div class="flex w-full flex-col items-center gap-4 text-center">
-        <div #qrContainer class="inline-block">
-          <ax-qrcode
-            [content]="getValue()"
-            [size]="size()"
-            [color]="color()"
-            [level]="level()"
-            [outputType]="outputType()"
-          >
-          </ax-qrcode>
-        </div>
-        @if (showContent()) {
-          <div class="flex max-w-full flex-col items-center gap-1">
-            <span class="text-sm font-medium">{{ contentLabel() | translate | async }}</span>
-            <span class="break-all text-sm">{{ getValue() }}</span>
-          </div>
-        } @else {
-          <ax-button
-            look="twotone"
-            class="ax-sm"
-            [title]="('@general:actions.preview.title' | translate | async)!"
-            (onClick)="openPreview()"
-          >
-            <ax-icon icon="fa-light fa-expand"></ax-icon>
-          </ax-button>
-        }
-      </div>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXButtonModule, AXDecoratorModule, AXQrcodeModule, AXTranslationModule, AsyncPipe],
-                    host: { class: 'block w-full' },
-                }]
-        }], propDecorators: { qrContainer: [{ type: i0.ViewChild, args: ['qrContainer', { isSignal: true }] }] } });
+            args: [{ selector: 'axp-qrcode-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXQrcodeModule, AXTranslationModule, AsyncPipe], host: { class: 'block w-full' }, template: "@if (displayMode() !== 'empty') {\n  <div class=\"flex w-full flex-col items-center gap-4 text-center\">\n    <div #qrContainer class=\"inline-block\">\n      <!-- ----- Attached image replaces the generated QR while a file is stored ----- -->\n      @if (displayMode() === 'image') {\n        <!-- ----- Show the stored image at the widget size without cropping ----- -->\n        @if (imageUrl()) {\n          <img\n            [src]=\"imageUrl()!\"\n            [attr.alt]=\"('@platform-layout-widgets:widgets.qrcode.attachment.alt' | translate | async) ?? ''\"\n            class=\"object-contain\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          />\n        } @else {\n          <div\n            class=\"flex items-center justify-center\"\n            [style.width.px]=\"size()\"\n            [style.height.px]=\"size()\"\n          ></div>\n        }\n      } @else {\n        <ax-qrcode\n          [content]=\"getValue()\"\n          [size]=\"size()\"\n          [color]=\"color()\"\n          [level]=\"level()\"\n          [outputType]=\"outputType()\"\n        >\n        </ax-qrcode>\n      }\n    </div>\n    <!-- ----- QR text under the generated code ----- -->\n    @if (displayMode() === 'qr' && showContent()) {\n      <div class=\"flex max-w-full flex-col items-center gap-1\">\n        <span class=\"text-sm font-medium\">{{ contentLabel() | translate | async }}</span>\n        <span class=\"break-all text-sm\">{{ getValue() }}</span>\n      </div>\n    }\n    <!-- ----- Preview for the attached image or the generated QR ----- -->\n    @else if (!suppressPreview() && (displayMode() === 'image' || !showContent())) {\n      <ax-button\n        look=\"twotone\"\n        class=\"ax-sm\"\n        [title]=\"('@general:actions.preview.title' | translate | async)!\"\n        (onClick)=\"openPreview()\"\n      >\n        <ax-icon icon=\"fa-light fa-expand\"></ax-icon>\n      </ax-button>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { qrContainer: [{ type: i0.ViewChild, args: ['qrContainer', { isSignal: true }] }] } });
 
 var qrcodeWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -16114,7 +16980,7 @@ class AXPStatusChipComponent {
         </div>
       </ax-popover>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStatusChipComponent, decorators: [{
             type: Component,
@@ -17223,7 +18089,7 @@ class AXPWidgetFieldConfiguratorWidgetEditComponent extends AXPValueWidgetCompon
         [readonly]="readonly()"
       ></axp-widget-field-configurator>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AXPWidgetFieldConfiguratorComponent, selector: "axp-widget-field-configurator", inputs: ["widget", "label", "fieldName", "fieldTitle", "readonly", "selectedItemIdModel", "valuesModel"], outputs: ["widgetChange", "selectedItemIdModelChange", "valuesModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPWidgetFieldConfiguratorComponent, selector: "axp-widget-field-configurator", inputs: ["widget", "label", "fieldName", "fieldTitle", "readonly", "selectedItemIdModel", "valuesModel", "nodeFieldsModel"], outputs: ["widgetChange", "selectedItemIdModelChange", "valuesModelChange", "nodeFieldsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorWidgetEditComponent, decorators: [{
             type: Component,
@@ -17744,7 +18610,7 @@ class AXPItemConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
         [headerActions]="headerActions()"
       ></axp-item-configurator>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPItemConfiguratorComponent, selector: "axp-item-configurator", inputs: ["selectedItemId", "values", "nodeFields", "label", "readonly", "items", "headerActions"], outputs: ["selectedItemIdChange", "valuesChange", "nodeFieldsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorWidgetEditComponent, decorators: [{
             type: Component,
@@ -19930,7 +20796,7 @@ const AXPRepeaterWidget = {
             component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
         },
         column: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-SHCgo4UC.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-XgjDH9Oc.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
         },
     },
 };
@@ -22471,7 +23337,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button\n  color=\"primary\"\n  [text]=\"('@layout-designer:property-editor.layout-profile.reset' | translate | async) ?? ''\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.grid' | translate | async }}</span>\n  <div class=\"flex items-center justify-between gap-1\">\n    <span class=\"text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <span class=\"text-xs\">{{ '@layout-designer:property-editor.flex-grid.column' | translate | async }}</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of gridSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      @if (hoveredJustify() && hoveredAlign()) {\n        <div\n          class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n              @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              } @else if (clickedJustify() === 'stretch') {\n                <svg\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'stretch') {\n                <svg\n                  width=\"20\"\n                  height=\"60\"\n                  viewBox=\"0 0 20 60\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else {\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: #efeaea\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                    class=\"hover:fill-opacity-20\"\n                  ></path>\n                </svg>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 60 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n                <path\n                  d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n                <path\n                  d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n              </svg>\n            } @else if (clickedJustify() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"20\"\n                viewBox=\"0 0 60 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg\n                width=\"20\"\n                height=\"60\"\n                viewBox=\"0 0 20 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else {\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: #efeaea\"\n              >\n                <path\n                  d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill: #cebcbc; fill-opacity: 0.16\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n            fill=\"currentColor\"\n          ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setGap($event ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'single') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button\n  color=\"primary\"\n  [text]=\"('@layout-designer:property-editor.layout-profile.reset' | translate | async) ?? ''\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.grid' | translate | async }}</span>\n  <div class=\"flex items-center justify-between gap-1\">\n    <span class=\"text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <span class=\"text-xs\">{{ '@layout-designer:property-editor.flex-grid.column' | translate | async }}</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of gridSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      @if (hoveredJustify() && hoveredAlign()) {\n        <div\n          class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n              @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              } @else if (clickedJustify() === 'stretch') {\n                <svg\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'stretch') {\n                <svg\n                  width=\"20\"\n                  height=\"60\"\n                  viewBox=\"0 0 20 60\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else {\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: #efeaea\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                    class=\"hover:fill-opacity-20\"\n                  ></path>\n                </svg>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 60 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n                <path\n                  d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n                <path\n                  d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n              </svg>\n            } @else if (clickedJustify() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"20\"\n                viewBox=\"0 0 60 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg\n                width=\"20\"\n                height=\"60\"\n                viewBox=\"0 0 20 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else {\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: #efeaea\"\n              >\n                <path\n                  d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill: #cebcbc; fill-opacity: 0.16\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n            fill=\"currentColor\"\n          ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setGap($event ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'single') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -22653,7 +23519,7 @@ class AXPAdvancedGridOptionsWidgetEditComponent extends AXPValueWidgetComponent
         this.selectedAlign.set({ value: align, label: this.findAlignNameById(align) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid w-11/12\">\n  <div class=\"grid grid-cols-2 grid-rows-2 gap-x-3 items-center pb-2\">\n    <span>Columns</span>\n    <span>Items</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"changeValue($event, 'columns')\"\n    ></ax-number-box>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"99\"\n      [value]=\"items()\"\n      (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n    ></ax-number-box>\n  </div>\n  <span>Align</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"grid place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div\n        class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg\n              width=\"60\"\n              height=\"60\"\n              viewBox=\"0 0 60 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n              <path\n                d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill: #cebcbc; fill-opacity: 0.16\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: "ngmodule", type: AXLabelModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid w-11/12\">\n  <div class=\"grid grid-cols-2 grid-rows-2 gap-x-3 items-center pb-2\">\n    <span>Columns</span>\n    <span>Items</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"changeValue($event, 'columns')\"\n    ></ax-number-box>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"99\"\n      [value]=\"items()\"\n      (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n    ></ax-number-box>\n  </div>\n  <span>Align</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"grid place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div\n        class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg\n              width=\"60\"\n              height=\"60\"\n              viewBox=\"0 0 60 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n              <path\n                d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill: #cebcbc; fill-opacity: 0.16\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: "ngmodule", type: AXLabelModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -23684,7 +24550,7 @@ class AXPDataSourceOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     //#region ----- Lifecycle -----
     #init;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options flex flex-col gap-3 py-2\">\n  <!-- ----- Mode: exists or list ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.source | translate | async }}</span>\n    <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n      (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n      valueField=\"value\" textField=\"text\" />\n  </div>\n\n  <!-- ----- Select registered query (only when mode is exists) ----- -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"queriesDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onQueryChange($event)\" valueField=\"name\" textField=\"title\"\n      [searchable]=\"true\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n\n  <!-- ----- Form-local named list (designer store) ----- -->\n  @if (dataSourceMode() === 'local') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <div class=\"flex items-center gap-2\">\n      <ax-lookup\n        class=\"flex-1\"\n        mode=\"drop-down-list\"\n        [dataSource]=\"localSourcesDataSource()\"\n        [ngModel]=\"selectedLocalId()\"\n        (onValueChanged)=\"onLocalSourceChange($event)\"\n        valueField=\"id\"\n        textField=\"name\"\n        [searchable]=\"true\"\n        [placeholder]=\"(I18N.localPlaceholder | translate | async) ?? ''\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n      <ax-button\n        look=\"blank\"\n        class=\"ax-sm\"\n        [title]=\"(I18N.addLocal | translate | async) ?? ''\"\n        (onClick)=\"handleCreateLocal()\"\n      >\n        <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n      </ax-button>\n      <!--->\n      <!-- ----- Edit the selected local list ----- -->\n      @if (selectedLocalId()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          [title]=\"(I18N.editLocal | translate | async) ?? ''\"\n          (onClick)=\"handleEditLocal()\"\n        >\n          <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- ----- Simple list (text rows) when no local store ----- -->\n  @if (dataSourceMode() === 'list') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.listItems | translate | async }}</span>\n    <axp-repeater-rows-layout\n      [count]=\"listEntries().length\"\n      [rowTemplate]=\"listRowTpl\"\n      [hasControls]=\"true\"\n      [allowReorder]=\"true\"\n      [addItemLabelKey]=\"I18N.addListItem\"\n      (addClick)=\"addListEntry()\"\n      (removeClick)=\"removeListEntry($event)\"\n      (drop)=\"onListDrop($event)\"\n    ></axp-repeater-rows-layout>\n    <ng-template #listRowTpl let-index=\"index\">\n      <ax-text-box\n        class=\"w-full\"\n        [ngModel]=\"listEntries()[index]\"\n        (onValueChanged)=\"onListEntryChange(index, $event)\"\n      />\n    </ng-template>\n  </div>\n  }\n\n  <!-- ----- valueField / textField (exists only) ----- -->\n  @if (fieldSelectsKey() && (dataSourceMode() === 'exists' || dataSourceMode() === 'local')) {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n\n  <!-- ----- textField select ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n</div>\n", styles: [".axp-data-source-options{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXPRepeaterRowsLayoutComponent, selector: "axp-repeater-rows-layout", inputs: ["count", "disabled", "hasControls", "allowReorder", "inlineAddControl", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options flex flex-col gap-3 py-2\">\n  <!-- ----- Mode: exists or list ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.source | translate | async }}</span>\n    <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n      (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n      valueField=\"value\" textField=\"text\" />\n  </div>\n\n  <!-- ----- Select registered query (only when mode is exists) ----- -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"queriesDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onQueryChange($event)\" valueField=\"name\" textField=\"title\"\n      [searchable]=\"true\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n\n  <!-- ----- Form-local named list (designer store) ----- -->\n  @if (dataSourceMode() === 'local') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <div class=\"flex items-center gap-2\">\n      <ax-lookup\n        class=\"flex-1\"\n        mode=\"drop-down-list\"\n        [dataSource]=\"localSourcesDataSource()\"\n        [ngModel]=\"selectedLocalId()\"\n        (onValueChanged)=\"onLocalSourceChange($event)\"\n        valueField=\"id\"\n        textField=\"name\"\n        [searchable]=\"true\"\n        [placeholder]=\"(I18N.localPlaceholder | translate | async) ?? ''\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n      <ax-button\n        look=\"blank\"\n        class=\"ax-sm\"\n        [title]=\"(I18N.addLocal | translate | async) ?? ''\"\n        (onClick)=\"handleCreateLocal()\"\n      >\n        <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n      </ax-button>\n      <!--->\n      <!-- ----- Edit the selected local list ----- -->\n      @if (selectedLocalId()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          [title]=\"(I18N.editLocal | translate | async) ?? ''\"\n          (onClick)=\"handleEditLocal()\"\n        >\n          <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- ----- Simple list (text rows) when no local store ----- -->\n  @if (dataSourceMode() === 'list') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.listItems | translate | async }}</span>\n    <axp-repeater-rows-layout\n      [count]=\"listEntries().length\"\n      [rowTemplate]=\"listRowTpl\"\n      [hasControls]=\"true\"\n      [allowReorder]=\"true\"\n      [addItemLabelKey]=\"I18N.addListItem\"\n      (addClick)=\"addListEntry()\"\n      (removeClick)=\"removeListEntry($event)\"\n      (drop)=\"onListDrop($event)\"\n    ></axp-repeater-rows-layout>\n    <ng-template #listRowTpl let-index=\"index\">\n      <ax-text-box\n        class=\"w-full\"\n        [ngModel]=\"listEntries()[index]\"\n        (onValueChanged)=\"onListEntryChange(index, $event)\"\n      />\n    </ng-template>\n  </div>\n  }\n\n  <!-- ----- valueField / textField (exists only) ----- -->\n  @if (fieldSelectsKey() && (dataSourceMode() === 'exists' || dataSourceMode() === 'local')) {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n\n  <!-- ----- textField select ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n</div>\n", styles: [".axp-data-source-options{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXPRepeaterRowsLayoutComponent, selector: "axp-repeater-rows-layout", inputs: ["count", "disabled", "hasControls", "allowReorder", "inlineAddControl", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -24261,7 +25127,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.wrap' | translate | async }}</span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of flexSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (hoveredJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (clickedJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg\n                  data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- removed legacy ax-select-box align/justify picker -->\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span class=\"order-3\">Y:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"w-32\"\n        [ngModel]=\"gap().both\"\n        (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().both\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'both') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.wrap' | translate | async }}</span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of flexSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (hoveredJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (clickedJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg\n                  data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- removed legacy ax-select-box align/justify picker -->\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span class=\"order-3\">Y:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"w-32\"\n        [ngModel]=\"gap().both\"\n        (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().both\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'both') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -24701,7 +25567,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         this.setValue({ ...bag, [key]: diff });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\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: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: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: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: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\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\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: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: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: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: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\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 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)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></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=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\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\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? '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=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs 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=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\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>{{ '@layout-designer:property-editor.layout-profile.reset' | translate | async }}</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\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: ["@layer properties;.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{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);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}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;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);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;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;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], 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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\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: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: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: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: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\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\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: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: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: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: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\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 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)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></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=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\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\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\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:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? '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=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs 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=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\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>{{ '@layout-designer:property-editor.layout-profile.reset' | translate | async }}</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\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: ["@layer properties;.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{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);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}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;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);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;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;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], 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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -28172,7 +29038,8 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
     }
     onFiltersChanged(filters) {
         const next = this.filtersWithHiddenScope(filters);
-        if (!isEqual(this.getValue()?.filters || [], next)) {
+        const current = (this.getValue()?.filters || []);
+        if (!isEqual(current, next) && !this.sameFilterLeaves(current, next)) {
             if (this.filterTriggerMode() === 'auto') {
                 this.setValue({ ...this.getValue(), filters: next });
             }
@@ -28184,6 +29051,15 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
     filtersWithHiddenScope(incoming) {
         return mergeHiddenScopeFilters(this.getValue()?.filters, incoming);
     }
+    /** Query-filters rewrites the same conditions into groups. That echo must not reload the list. */
+    sameFilterLeaves(left, right) {
+        const signature = (filters) => JSON.stringify(collectQueryFilterLeaves(filters).map((leaf) => ({
+            field: leaf.field ?? null,
+            operator: leaf.operator?.type ?? null,
+            value: leaf.value ?? null,
+        })));
+        return signature(left) === signature(right);
+    }
     onColumnsChanged(columns) {
         if (!isEqual(this.getValue()?.columns || [], columns)) {
             this.setValue({ ...this.getValue(), columns });
@@ -28394,7 +29270,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n  @if (showViews()) {\n    <!-- ----- Query view tabs and custom-view actions ----- -->\n    <axp-query-view-tabs\n      class=\"w-full\"\n      [views]=\"viewQueries()\"\n      [selectedView]=\"selectedViewQuery()\"\n      (selectedViewChange)=\"onViewChanged($event)\"\n      (edit)=\"onEditQueryView($event)\"\n      (remove)=\"onDeleteQueryView($event)\"\n    ></axp-query-view-tabs>\n  }\n  @if (showFilterToolbarRow()) {\n    <!-- ----- Filter, sort, and view presentation controls ----- -->\n    <div class=\"axp-list-toolbar__row flex min-w-0 flex-wrap items-center gap-2 overflow-hidden border-b border-light w-full\">\n      @if (canFilter()) {\n        <axp-query-filters\n          class=\"min-w-0 flex-1\"\n          [filtersDefinitions]=\"filterDefinitions()\"\n          [initialFilters]=\"initialFilters()\"\n          [mode]=\"filterMode()\"\n          (onFiltersChanged)=\"onFiltersChanged($event)\"\n        ></axp-query-filters>\n      }\n      <div class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\">\n        <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n        @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n          <ax-button\n            [title]=\"'@general:actions.apply.title'\"\n            [iconOnly]=\"true\"\n            [color]=\"'primary'\"\n            (onClick)=\"applyFilters()\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n        <!-- ----- Save View appears when the list layout is dirty ----- -->\n        <axp-query-view-save-button\n          [visible]=\"canSaveQueryView()\"\n          (save)=\"onSaveQueryView()\"\n        ></axp-query-view-save-button>\n\n        <!-- ----- Sort opens the existing sort panel directly ----- -->\n        @if (canSort()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n              [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n              [title]=\"\n                (activeSortCount() > 0\n                  ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                  : ('@general:actions.sort.title' | translate | async)) ?? ''\n              \"\n              [attr.aria-expanded]=\"sortMenuOpen()\"\n              [attr.aria-haspopup]=\"'dialog'\"\n              #sortButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"sortButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"sortMenuOpen.set(true)\"\n              (onClosed)=\"sortMenuOpen.set(false)\"\n            >\n              <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n                <axp-query-sorts\n                  [sortDefinitions]=\"sortDefinitions()\"\n                  [sortPresets]=\"sortPresets()\"\n                  [defaultSortQueries]=\"defaultSorts()\"\n                  (sortQueriesChange)=\"onSortsChanged($event)\"\n                  [initialSortQueries]=\"initialSorts()\"\n                ></axp-query-sorts>\n              </div>\n            </ax-popover>\n          </div>\n        }\n\n        <!-- ----- View groups presentation settings ----- -->\n        @if (showViewMenu()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"'default'\"\n              [title]=\"('@general:terms.interface.view.menu-button' | translate | async) ?? ''\"\n              [attr.aria-expanded]=\"viewMenuOpen()\"\n              [attr.aria-haspopup]=\"'menu'\"\n              #viewButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"viewButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"onViewMenuOpened()\"\n              (onClosed)=\"onViewMenuClosed()\"\n              #viewPopover\n            >\n              <div class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border w-72 max-w-full rounded-md overflow-hidden\">\n                <!-- ----- Nested column visibility panel ----- -->\n                @if (viewMenuPanel() === 'columns') {\n                  <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'default'\"\n                      [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                      (onClick)=\"viewMenuPanel.set('root')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                    </ax-button>\n                    <span class=\"min-w-0 flex-1 truncate font-bold\">\n                      {{ '@general:terms.common.columns' | translate | async }}\n                    </span>\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'primary'\"\n                      [text]=\"'@general:actions.reset.title' | translate | async\"\n                      (onClick)=\"resetViewColumns()\"\n                    ></ax-button>\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n                    <axp-query-columns\n                      [columns]=\"pickerColumns()\"\n                      [constrainHeight]=\"false\"\n                      (columnsChange)=\"onColumnsChanged($event)\"\n                    ></axp-query-columns>\n                  </div>\n                }\n                <!-- ----- Root presentation menu ----- -->\n                @else {\n                  <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n                    {{ '@general:terms.interface.view.menu-title' | translate | async }}\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body py-2\">\n                    <!-- ----- Display mode ----- -->\n                    @if (showListDisplayModeControl()) {\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        @if (hasTableListDisplayOption()) {\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'table'\"\n                            (onClick)=\"setListDisplayMode('table')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-table\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected table layout ----- -->\n                            @if (listDisplayMode() === 'table') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasCardListDisplayOption()) {\n                          <!-- ----- Card grid presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'card'\"\n                            (onClick)=\"setListDisplayMode('card')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected card layout ----- -->\n                            @if (listDisplayMode() === 'card') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasRowListDisplayOption()) {\n                          <!-- ----- Horizontal row-list presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'row'\"\n                            (onClick)=\"setListDisplayMode('row')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected row layout ----- -->\n                            @if (listDisplayMode() === 'row') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    }\n\n                    <!-- ----- Columns ----- -->\n                    @if (showColumnsControl()) {\n                      <!--->\n                      <!-- ----- Divider when a display-mode section is already shown ----- -->\n                      @if (showListDisplayModeControl()) {\n                        <ax-divider />\n                      }\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.common.columns' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                          (onClick)=\"openViewColumnsPanel()\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                          </ax-prefix>\n                          <ax-suffix>\n                            <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                          </ax-suffix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-list-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}@media(max-width:600px){.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n  @if (showViews()) {\n    <!-- ----- Query view tabs and custom-view actions ----- -->\n    <axp-query-view-tabs\n      class=\"w-full\"\n      [views]=\"viewQueries()\"\n      [selectedView]=\"selectedViewQuery()\"\n      (selectedViewChange)=\"onViewChanged($event)\"\n      (edit)=\"onEditQueryView($event)\"\n      (remove)=\"onDeleteQueryView($event)\"\n    ></axp-query-view-tabs>\n  }\n  @if (showFilterToolbarRow()) {\n    <!-- ----- Filter, sort, and view presentation controls ----- -->\n    <div class=\"axp-list-toolbar__row flex min-w-0 flex-wrap items-center gap-2 overflow-hidden border-b border-light w-full\">\n      @if (canFilter()) {\n        <axp-query-filters\n          class=\"min-w-0 flex-1\"\n          [filtersDefinitions]=\"filterDefinitions()\"\n          [initialFilters]=\"initialFilters()\"\n          [mode]=\"filterMode()\"\n          (onFiltersChanged)=\"onFiltersChanged($event)\"\n        ></axp-query-filters>\n      }\n      <div class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\">\n        <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n        @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n          <ax-button\n            [title]=\"'@general:actions.apply.title'\"\n            [iconOnly]=\"true\"\n            [color]=\"'primary'\"\n            (onClick)=\"applyFilters()\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n        <!-- ----- Save View appears when the list layout is dirty ----- -->\n        <axp-query-view-save-button\n          [visible]=\"canSaveQueryView()\"\n          (save)=\"onSaveQueryView()\"\n        ></axp-query-view-save-button>\n\n        <!-- ----- Sort opens the existing sort panel directly ----- -->\n        @if (canSort()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n              [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n              [title]=\"\n                (activeSortCount() > 0\n                  ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                  : ('@general:actions.sort.title' | translate | async)) ?? ''\n              \"\n              [attr.aria-expanded]=\"sortMenuOpen()\"\n              [attr.aria-haspopup]=\"'dialog'\"\n              #sortButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"sortButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"sortMenuOpen.set(true)\"\n              (onClosed)=\"sortMenuOpen.set(false)\"\n            >\n              <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n                <axp-query-sorts\n                  [sortDefinitions]=\"sortDefinitions()\"\n                  [sortPresets]=\"sortPresets()\"\n                  [defaultSortQueries]=\"defaultSorts()\"\n                  (sortQueriesChange)=\"onSortsChanged($event)\"\n                  [initialSortQueries]=\"initialSorts()\"\n                ></axp-query-sorts>\n              </div>\n            </ax-popover>\n          </div>\n        }\n\n        <!-- ----- View groups presentation settings ----- -->\n        @if (showViewMenu()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"'default'\"\n              [title]=\"('@general:terms.interface.view.menu-button' | translate | async) ?? ''\"\n              [attr.aria-expanded]=\"viewMenuOpen()\"\n              [attr.aria-haspopup]=\"'menu'\"\n              #viewButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"viewButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"onViewMenuOpened()\"\n              (onClosed)=\"onViewMenuClosed()\"\n              #viewPopover\n            >\n              <div class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border w-72 max-w-full rounded-md overflow-hidden\">\n                <!-- ----- Nested column visibility panel ----- -->\n                @if (viewMenuPanel() === 'columns') {\n                  <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'default'\"\n                      [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                      (onClick)=\"viewMenuPanel.set('root')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                    </ax-button>\n                    <span class=\"min-w-0 flex-1 truncate font-bold\">\n                      {{ '@general:terms.common.columns' | translate | async }}\n                    </span>\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'primary'\"\n                      [text]=\"'@general:actions.reset.title' | translate | async\"\n                      (onClick)=\"resetViewColumns()\"\n                    ></ax-button>\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n                    <axp-query-columns\n                      [columns]=\"pickerColumns()\"\n                      [constrainHeight]=\"false\"\n                      (columnsChange)=\"onColumnsChanged($event)\"\n                    ></axp-query-columns>\n                  </div>\n                }\n                <!-- ----- Root presentation menu ----- -->\n                @else {\n                  <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n                    {{ '@general:terms.interface.view.menu-title' | translate | async }}\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body py-2\">\n                    <!-- ----- Display mode ----- -->\n                    @if (showListDisplayModeControl()) {\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        @if (hasTableListDisplayOption()) {\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'table'\"\n                            (onClick)=\"setListDisplayMode('table')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-table\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected table layout ----- -->\n                            @if (listDisplayMode() === 'table') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasCardListDisplayOption()) {\n                          <!-- ----- Card grid presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'card'\"\n                            (onClick)=\"setListDisplayMode('card')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected card layout ----- -->\n                            @if (listDisplayMode() === 'card') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasRowListDisplayOption()) {\n                          <!-- ----- Horizontal row-list presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'row'\"\n                            (onClick)=\"setListDisplayMode('row')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected row layout ----- -->\n                            @if (listDisplayMode() === 'row') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    }\n\n                    <!-- ----- Columns ----- -->\n                    @if (showColumnsControl()) {\n                      <!--->\n                      <!-- ----- Divider when a display-mode section is already shown ----- -->\n                      @if (showListDisplayModeControl()) {\n                        <ax-divider />\n                      }\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.common.columns' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                          (onClick)=\"openViewColumnsPanel()\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                          </ax-prefix>\n                          <ax-suffix>\n                            <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                          </ax-suffix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-list-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}@media(max-width:600px){.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -28594,6 +29470,20 @@ const AXPMapWidget = {
     },
 };
 
+const AXPFilterDefaultOperatorsWidget = {
+    name: AXP_FILTER_DEFAULT_OPERATORS_WIDGET_NAME,
+    title: '@general:settings.experience.entity.filter-default-operators.title',
+    description: '@general:settings.experience.entity.filter-default-operators.description',
+    icon: 'fa-light fa-filter',
+    type: 'editor',
+    groups: [AXPWidgetGroupEnum.BaseWidget],
+    components: {
+        edit: {
+            component: () => import('./acorex-platform-framework-client-layout-widgets-filter-default-operators-widget-edit.component-DOEn58--.mjs').then((c) => c.AXPFilterDefaultOperatorsWidgetEditComponent),
+        },
+    },
+};
+
 class AXPMetaDataWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
@@ -28918,8 +29808,6 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
-        this.validationRules = computed(() => (this.options()['validations'] ?? []), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "validationRules" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -28977,7 +29865,7 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
           @if (clearButton()) {
             <ax-clear-button></ax-clear-button>
@@ -29025,7 +29913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
           @if (clearButton()) {
             <ax-clear-button></ax-clear-button>
@@ -29487,6 +30375,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         //#region ---- Services & Dependencies ----
         this.timeDurationFormatter = inject(AXTimeDurationFormatter);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         //#endregion
         //#region ---- Computed Properties ----
         this.filterMode = computed(() => this.options()['filterMode'] ?? false, /* @ts-ignore */
@@ -29524,7 +30413,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: AXP_TIME_DURATION_FILTER_DEFAULT_OPERATOR };
+            return { type: this.filterDefaults.resolve('time-duration-filter', AXP_TIME_DURATION_FILTER_DEFAULT_OPERATOR) };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         /** In filterMode the stored value is `{ value, operation, displayText }`; bind the unwrapped duration. */
@@ -29597,7 +30486,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
             [maskDigits]="maskDigits()"
           >
             @for (validation of validationRules(); track $index) {
-              <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options"></ax-validation-rule>
+              <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options" [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-time-duration>
         </div>
@@ -29614,7 +30503,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     } @else {
       <ax-time-duration [ngModel]="getValue()" (onValueChanged)="handleChangeValue($event)" [valueStart]="from()" [valueEnd]="to()" [label]="label()" [minValue]="minValue()" [maxValue]="maxValue()" [disabled]="disabled()" [maskDigits]="maskDigits()">
         @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options"></ax-validation-rule>
+          <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options" [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-time-duration>
     }
@@ -29640,7 +30529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [maskDigits]="maskDigits()"
           >
             @for (validation of validationRules(); track $index) {
-              <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options"></ax-validation-rule>
+              <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options" [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-time-duration>
         </div>
@@ -29657,7 +30546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     } @else {
       <ax-time-duration [ngModel]="getValue()" (onValueChanged)="handleChangeValue($event)" [valueStart]="from()" [valueEnd]="to()" [label]="label()" [minValue]="minValue()" [maxValue]="maxValue()" [disabled]="disabled()" [maskDigits]="maskDigits()">
         @for (validation of validationRules(); track $index) {
-          <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options"></ax-validation-rule>
+          <ax-validation-rule [rule]="validation.rule" [message]="$safeNavigationMigration(validation.options?.message)" [options]="validation.options" [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-time-duration>
     }
@@ -29740,13 +30629,14 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         //#region -----   Services & Dependencies   -----
         this.translateService = inject(AXTranslationService);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         //#endregion
         //#region -----   View Children   -----
         this.lookup = viewChild('lookup', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lookup" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region -----   Computed Properties   -----
-        this.operation = computed(() => this.getValue()?.operation || AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR, /* @ts-ignore */
+        this.operation = computed(() => this.getValue()?.operation || this.filterDefaults.resolve('boolean-filter', AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this.getValue()?.value, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -29853,7 +30743,9 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         const item = this.findItem(value);
         this.setValue({
             value,
-            operation: this.negative() ? { type: 'notEqual' } : { type: AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR },
+            operation: this.negative()
+                ? { type: 'notEqual' }
+                : { type: this.filterDefaults.resolve('boolean-filter', AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR) },
             displayText: displayText ?? item?.text,
         });
     }
@@ -29874,7 +30766,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
       >
       </ax-lookup>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -29926,6 +30818,7 @@ const AXPNumberFilterWidget = {
 class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         this.numberBox = viewChild('numberBox', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numberBox" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this.getValue()?.value, /* @ts-ignore */
@@ -29949,7 +30842,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: AXP_NUMBER_FILTER_DEFAULT_OPERATOR };
+            return { type: this.filterDefaults.resolve('number-filter', AXP_NUMBER_FILTER_DEFAULT_OPERATOR) };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'], /* @ts-ignore */
@@ -30017,7 +30910,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
                 [rule]="validation.rule"
                 [message]="$safeNavigationMigration(validation.options?.message)"
                 [options]="validation.options"
-              ></ax-validation-rule>
+               [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-number-box>
           <ax-number-box
@@ -30034,7 +30927,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
                 [rule]="validation.rule"
                 [message]="$safeNavigationMigration(validation.options?.message)"
                 [options]="validation.options"
-              ></ax-validation-rule>
+               [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-number-box>
         </div>
@@ -30055,7 +30948,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
         </ax-number-box>
       }
@@ -30093,7 +30986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 [rule]="validation.rule"
                 [message]="$safeNavigationMigration(validation.options?.message)"
                 [options]="validation.options"
-              ></ax-validation-rule>
+               [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-number-box>
           <ax-number-box
@@ -30110,7 +31003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 [rule]="validation.rule"
                 [message]="$safeNavigationMigration(validation.options?.message)"
                 [options]="validation.options"
-              ></ax-validation-rule>
+               [disabled]="validation.disabled === true"></ax-validation-rule>
             }
           </ax-number-box>
         </div>
@@ -30131,7 +31024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               [rule]="validation.rule"
               [message]="$safeNavigationMigration(validation.options?.message)"
               [options]="validation.options"
-            ></ax-validation-rule>
+             [disabled]="validation.disabled === true"></ax-validation-rule>
           }
         </ax-number-box>
       }
@@ -30187,6 +31080,7 @@ class AXPStatusFilterWidgetEditComponent extends AXPDataListWidgetComponent {
         super(...arguments);
         //#region ----   Services & Dependencies   ----
         this.statusService = inject(AXPStatusDefinitionProviderService);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         //#endregion
         //#region ----   View Children   ----
         this.lookup = viewChild('lookup', /* @ts-ignore */
@@ -30259,7 +31153,9 @@ class AXPStatusFilterWidgetEditComponent extends AXPDataListWidgetComponent {
     commitSelection(value, displayText) {
         const resolved = this.resolveStatusValue(value);
         this.setValue({
-            operation: this.multiple() ? { type: 'in' } : { type: AXP_STATUS_FILTER_DEFAULT_OPERATOR },
+            operation: this.multiple()
+                ? { type: 'in' }
+                : { type: this.filterDefaults.resolve('status-filter', AXP_STATUS_FILTER_DEFAULT_OPERATOR) },
             value: resolved,
             ...(displayText ? { displayText } : {}),
         });
@@ -30291,7 +31187,7 @@ class AXPStatusFilterWidgetEditComponent extends AXPDataListWidgetComponent {
         <ax-clear-button></ax-clear-button>
       </ax-lookup>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems", "prefetch"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStatusFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -30343,6 +31239,7 @@ const AXPStringFilterWidget = {
 class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        this.filterDefaults = inject(AXPFilterDefaultOperatorService);
         this.textBox = viewChild('textBox', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textBox" }] : /* istanbul ignore next */ []));
         /** Normalized: empty array from options is treated as unset (full operator list). */
@@ -30365,7 +31262,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: AXP_STRING_FILTER_DEFAULT_OPERATOR };
+            return { type: this.filterDefaults.resolve('string-filter', AXP_STRING_FILTER_DEFAULT_OPERATOR) };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this.getValue()?.value, /* @ts-ignore */
@@ -30413,7 +31310,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-box>
       <axp-filter-operations
@@ -30450,7 +31347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [rule]="validation.rule"
             [message]="$safeNavigationMigration(validation.options?.message)"
             [options]="validation.options"
-          ></ax-validation-rule>
+           [disabled]="validation.disabled === true"></ax-validation-rule>
         }
       </ax-text-box>
       <axp-filter-operations
@@ -31069,6 +31966,7 @@ const AXPDocumentWidget = {
 class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetComponent {
     constructor() {
         super(...arguments);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.label = computed(() => this.options()['label'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.showLabel = computed(() => this.options()['showLabel'] ?? true, /* @ts-ignore */
@@ -31116,11 +32014,12 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         /** Label row needs to show even when label is hidden (e.g. icon-only hint with badge layout). */
         this.showTopRow = computed(() => this.showLabel() || !!this.badge() || this.hintAsIcon(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showTopRow" }] : /* istanbul ignore next */ []));
-        this.isRequired = computed(() => this.children().some((c) => {
-            const validations = c.options?.['validations'];
-            return Array.isArray(validations) && validations.some((v) => v.rule === 'required');
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+        this.isRequired = syncRequiredIndicator({
+            nodes: () => this.children(),
+            trackContext: () => this.contextService.data(),
+            isExpression: (value) => this.expressionEvaluator.isExpression(value),
+            evaluate: (expression) => this.expressionEvaluator.evaluate(expression, validationExpressionScope((path) => this.contextService.getValue(path))),
+        });
     }
     get __class() {
         return { ...this.hostClass(), 'hidden': this.visible() === false ? true : false };
@@ -31242,6 +32141,7 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
     constructor() {
         super(...arguments);
         //#region ----- Computed Properties -----
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.label = computed(() => this.options()['label'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.showLabel = computed(() => this.options()['showLabel'] ?? true, /* @ts-ignore */
@@ -31269,11 +32169,12 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
         ...(ngDevMode ? [{ debugName: "hintAsNote" }] : /* istanbul ignore next */ []));
         this.showTopRow = computed(() => this.showLabel() || !!this.badge() || this.hintAsIcon(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showTopRow" }] : /* istanbul ignore next */ []));
-        this.isRequired = computed(() => this.children().some((c) => {
-            const validations = c.options?.['validations'];
-            return Array.isArray(validations) && validations.some((v) => v.rule === 'required');
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+        this.isRequired = syncRequiredIndicator({
+            nodes: () => this.children(),
+            trackContext: () => this.contextService.data(),
+            isExpression: (value) => this.expressionEvaluator.isExpression(value),
+            evaluate: (expression) => this.expressionEvaluator.evaluate(expression, validationExpressionScope((path) => this.contextService.getValue(path))),
+        });
     }
     //#endregion
     //#region ----- Host -----
@@ -33305,7 +34206,7 @@ const AXPTextBlockWidget = {
             component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-BYsrp8LT.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-DDczHmAA.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
         },
     },
 };
@@ -33573,6 +34474,7 @@ const REGISTERED_WIDGETS = [
     //
     AXPIconWidget,
     //
+    AXPFilterDefaultOperatorsWidget,
     AXPStringFilterWidget,
     AXPBooleanFilterWidget,
     AXPNumberFilterWidget,
@@ -34088,5 +34990,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPConditionClauseWidget as $, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP as A, AXPCallbackValidationWidgetEditComponent as B, AXPCheckBoxWidget as C, AXPCheckBoxWidgetColumnComponent as D, AXPCheckBoxWidgetDesignerComponent as E, AXPCheckBoxWidgetEditComponent as F, AXPCheckBoxWidgetPrintComponent as G, AXPCheckBoxWidgetViewComponent as H, AXPCodeEditorWidget as I, AXPColorBoxWidget as J, AXPColorBoxWidgetColumnComponent as K, AXPColorBoxWidgetDesignerComponent as L, AXPColorBoxWidgetEditComponent as M, AXPColorBoxWidgetViewComponent as N, AXPColorChooserWidget as O, AXPColorChooserWidgetColumnComponent as P, AXPColorChooserWidgetDesignerComponent as Q, AXPColorChooserWidgetEditComponent as R, AXPColorChooserWidgetViewComponent as S, AXPColorPaletteWidget as T, AXPColorPaletteWidgetColumnComponent as U, AXPColorPaletteWidgetDesignerComponent as V, AXPColorPaletteWidgetEditComponent as W, AXPColorPaletteWidgetViewComponent as X, AXPConditionBuilderWidget as Y, AXPConditionBuilderWidgetEditComponent as Z, AXPConditionBuilderWidgetViewComponent as _, textBlockContentClass as a, AXPLargeTextWidgetPrintComponent as a$, AXPConditionClauseWidgetEditComponent as a0, AXPConnectedDragDropListsWidget as a1, AXPConnectedListsWidgetColumnComponent as a2, AXPConnectedListsWidgetEditComponent as a3, AXPConnectedListsWidgetViewComponent as a4, AXPContactWidget as a5, AXPContactWidgetColumnComponent as a6, AXPContactWidgetEditComponent as a7, AXPContactWidgetViewComponent as a8, AXPDataListColumnFooterComponent as a9, AXPFlexWidget as aA, AXPFlexWidgetDesignerComponent as aB, AXPFlexWidgetViewComponent as aC, AXPGetWidgetsForAIQuery as aD, AXPGreaterThanExpressionValidationWidget as aE, AXPGreaterThanValidationWidgetEditComponent as aF, AXPGridItemOptionsWidget as aG, AXPGridItemOptionsWidgetEditComponent as aH, AXPGridOptionsWidget as aI, AXPGridOptionsWidgetEditComponent as aJ, AXPImageMarkerPopupComponent as aK, AXPImageMarkerWidget as aL, AXPImageMarkerWidgetColumnComponent as aM, AXPImageMarkerWidgetEditComponent as aN, AXPImageMarkerWidgetViewComponent as aO, AXPIntegrationConnectionActionsService as aP, AXPIntegrationConnectionsPanelWidget as aQ, AXPIntegrationConnectionsPanelWidgetEditComponent as aR, AXPItemConfiguratorWidget as aS, AXPItemConfiguratorWidgetColumnComponent as aT, AXPItemConfiguratorWidgetEditComponent as aU, AXPJsonViewerWidget as aV, AXPJsonViewerWidgetEditComponent as aW, AXPJsonViewerWidgetViewComponent as aX, AXPLargeTextWidget as aY, AXPLargeTextWidgetColumnComponent as aZ, AXPLargeTextWidgetEditComponent as a_, AXPDataListWidget as aa, AXPDataListWidgetViewComponent as ab, AXPDataSourceOptionsWidget as ac, AXPDataSourceOptionsWidgetEditComponent as ad, AXPDateTimeBoxWidget as ae, AXPDateTimeBoxWidgetColumnComponent as af, AXPDateTimeBoxWidgetEditComponent as ag, AXPDateTimeBoxWidgetViewComponent as ah, AXPDirectionWidget as ai, AXPDirectionWidgetEditComponent as aj, AXPDragDropListWidget as ak, AXPEqualValidationWidget as al, AXPEqualValidationWidgetEditComponent as am, AXPFieldsetWidget as an, AXPFieldsetWidgetDesignerComponent as ao, AXPFieldsetWidgetViewComponent as ap, AXPFileViewerWidget as aq, AXPFileViewerWidgetEditComponent as ar, AXPFileViewerWidgetViewComponent as as, AXPFlexItemOptionsWidget as at, AXPFlexItemOptionsWidgetEditComponent as au, AXPFlexItemWidget as av, AXPFlexItemWidgetDesignerComponent as aw, AXPFlexItemWidgetViewComponent as ax, AXPFlexOptionsWidget as ay, AXPFlexOptionsWidgetEditComponent as az, AXPAdvancedGridItemWidget as b, AXPSelectBoxWidgetColumnComponent as b$, AXPLargeTextWidgetViewComponent as b0, AXPLessThanExpressionValidationWidget as b1, AXPLessThanValidationWidgetEditComponent as b2, AXPListStylingRulesExtendedWidget as b3, AXPListWidgetColumnComponent as b4, AXPListWidgetEditComponent as b5, AXPListWidgetViewComponent as b6, AXPLocalDataSourceSheetWidget as b7, AXPLocalDataSourceSheetWidgetEditComponent as b8, AXPMapWidgetEditComponent as b9, AXPProviderSelectWidgetColumnComponent as bA, AXPProviderSelectWidgetEditBase as bB, AXPProviderSelectWidgetViewComponent as bC, AXPQrcodeViewerService as bD, AXPQrcodeWidget as bE, AXPQrcodeWidgetColumnComponent as bF, AXPQrcodeWidgetEditComponent as bG, AXPQrcodeWidgetViewComponent as bH, AXPRatePickerWidget as bI, AXPRatePickerWidgetColumnComponent as bJ, AXPRatePickerWidgetEditComponent as bK, AXPRatePickerWidgetViewComponent as bL, AXPRegularExpressionValidationWidget as bM, AXPRegularExpressionValidationWidgetEditComponent as bN, AXPRepeaterWidget as bO, AXPRepeaterWidgetDesignerComponent as bP, AXPRepeaterWidgetEditComponent as bQ, AXPRepeaterWidgetViewComponent as bR, AXPRequiredValidationWidget as bS, AXPRequiredValidationWidgetEditComponent as bT, AXPRichTextWidget as bU, AXPRichTextWidgetColumnComponent as bV, AXPRichTextWidgetEditComponent as bW, AXPRichTextWidgetPrintComponent as bX, AXPRichTextWidgetViewComponent as bY, AXPSchedulerPickerWidget as bZ, AXPSelectBoxWidget as b_, AXPMapWidgetViewComponent as ba, AXPMaxLengthExpressionValidationWidget as bb, AXPMaxLengthValidationWidgetEditComponent as bc, AXPMinLengthExpressionValidationWidget as bd, AXPMinLengthValidationWidgetEditComponent as be, AXPNodeRendererWidget as bf, AXPNodeRendererWidgetDesignerComponent as bg, AXPNodeRendererWidgetEditComponent as bh, AXPNodeRendererWidgetViewComponent as bi, AXPNumberBoxWidget as bj, AXPNumberBoxWidgetColumnComponent as bk, AXPNumberBoxWidgetEditComponent as bl, AXPNumberBoxWidgetPrintComponent as bm, AXPNumberBoxWidgetViewComponent as bn, AXPOutcomeResultsViewerWidget as bo, AXPOutcomeResultsViewerWidgetViewComponent as bp, AXPPageWidget as bq, AXPPageWidgetViewComponent as br, AXPPasswordBoxWidget as bs, AXPPasswordBoxWidgetColumnComponent as bt, AXPPasswordBoxWidgetEditComponent as bu, AXPPasswordBoxWidgetViewComponent as bv, AXPProgressBarWidget as bw, AXPProgressBarWidgetColumnComponent as bx, AXPProgressBarWidgetEditComponent as by, AXPProgressBarWidgetViewComponent as bz, AXPAdvancedGridItemWidgetDesignerComponent as c, AXP_Flex_Box_Justify_Options as c$, AXPSelectBoxWidgetEditComponent as c0, AXPSelectBoxWidgetViewComponent as c1, AXPSelectLanguagePopup as c2, AXPSelectionListWidget as c3, AXPSelectionListWidgetColumnComponent as c4, AXPSelectionListWidgetDesignerComponent as c5, AXPSelectionListWidgetEditComponent as c6, AXPSelectionListWidgetViewComponent as c7, AXPSignatureWidget as c8, AXPSignatureWidgetColumnComponent as c9, AXPTemplateBoxWidgetEditComponent as cA, AXPTemplateBoxWidgetPrintComponent as cB, AXPTemplateBoxWidgetViewComponent as cC, AXPTextBoxWidget as cD, AXPTextBoxWidgetColumnComponent as cE, AXPTextBoxWidgetEditComponent as cF, AXPTextBoxWidgetPrintComponent as cG, AXPTextBoxWidgetViewComponent as cH, AXPToggleWidget as cI, AXPToggleWidgetColumnComponent as cJ, AXPToggleWidgetEditComponent as cK, AXPToggleWidgetPrintComponent as cL, AXPToggleWidgetViewComponent as cM, AXPWidgetFieldConfiguratorWidget as cN, AXPWidgetFieldConfiguratorWidgetColumnComponent as cO, AXPWidgetFieldConfiguratorWidgetEditComponent as cP, AXPWidgetsModule as cQ, AXP_ABSOLUTE_UNITS as cR, AXP_BORDER_RADIUS_UNITS as cS, AXP_BORDER_WIDTH_UNITS as cT, AXP_CONDITION_CLAUSE_WIDGET_NAME as cU, AXP_DATA_LIST_CMD_DELETE as cV, AXP_DATA_LIST_CMD_EDIT as cW, AXP_DATA_LIST_PENDING_DELETE_KEY as cX, AXP_DATETIME_FILTER_DEFAULT_OPERATOR as cY, AXP_Flex_Box_Align_Options as cZ, AXP_Flex_Box_Alignments as c_, AXPSignatureWidgetEditComponent as ca, AXPSignatureWidgetViewComponent as cb, AXPSpacingWidget as cc, AXPSpacingWidgetEditComponent as cd, AXPStatusChipComponent as ce, AXPStatusWidget as cf, AXPStatusWidgetColumnComponent as cg, AXPStatusWidgetEditComponent as ch, AXPStatusWidgetViewComponent as ci, AXPStepWizardWidget as cj, AXPStepWizardWidgetDesignerComponent as ck, AXPStepWizardWidgetViewComponent as cl, AXPStopwatchWidget as cm, AXPStopwatchWidgetViewComponent as cn, AXPTableItemWidget as co, AXPTableItemWidgetDesignerComponent as cp, AXPTableItemWidgetViewComponent as cq, AXPTableWidget as cr, AXPTableWidgetDesignerComponent as cs, AXPTableWidgetViewComponent as ct, AXPTagEditorWidget as cu, AXPTagEditorWidgetColumnComponent as cv, AXPTagEditorWidgetEditComponent as cw, AXPTagEditorWidgetViewComponent as cx, AXPTemplateBoxWidget as cy, AXPTemplateBoxWidgetColumnComponent as cz, AXPAdvancedGridItemWidgetViewComponent as d, AXP_Grid_Box_Align_Items_Options as d0, AXP_Grid_Box_Alignments as d1, AXP_Grid_Box_Justify_Items_Options as d2, AXP_LIST_STYLING_RULES_WIDGET_NAME as d3, AXP_LOCAL_DATA_SOURCE_SHEET_WIDGET_NAME as d4, AXP_RELATIVE_UNITS as d5, AXP_RELATIVE_UNITS_NO_PERCENT as d6, AXP_ROW_EXPR_PREFIX as d7, AXP_SELECT_COLUMN_RESOLVE_QUERY as d8, AXP_SELECT_FILTER_DEFAULT_OPERATOR as d9, AXP_SPACING_UNITS as da, AXP_default_Border_Box_Units as db, AXP_default_Border_Box_Value as dc, AXP_default_Spacing_Box_Units as dd, AXP_default_Spacing_Box_Value as de, DEFAULT_QRCODE_SIZE as df, DEFAULT_STRATEGY_CONFIG as dg, STRATEGY_CONFIG_TOKEN as dh, applyLeafVisibilityToDataListColumnTree as di, flattenDataListWidgetColumns as dj, formatConditionBuilderChip as dk, formatConditionBuilderSentence as dl, isDataListColumnBand as dm, prepareNodeRendererChild as dn, resolveColorChooserGroups as dp, resolveDataListColumnWidth as dq, tokensToPlainText as dr, AXPAdvancedGridOptionsWidget as e, AXPAdvancedGridOptionsWidgetEditComponent as f, AXPAdvancedGridWidget as g, AXPAdvancedGridWidgetDesignerComponent as h, AXPAdvancedGridWidgetViewComponent as i, AXPAvatarWidget as j, AXPAvatarWidgetColumnComponent as k, AXPAvatarWidgetDesignerComponent as l, AXPAvatarWidgetEditComponent as m, AXPAvatarWidgetViewComponent as n, AXPBetweenExpressionValidationWidget as o, AXPBetweenValidationWidgetEditComponent as p, AXPBlockWidget as q, AXPBlockWidgetDesignerComponent as r, AXPBlockWidgetViewComponent as s, textBlockStyleAttribute as t, AXPBorderWidget as u, AXPBorderWidgetEditComponent as v, AXPButtonWidget as w, AXPButtonWidgetColumnComponent as x, AXPButtonWidgetViewComponent as y, AXPCallbackValidationWidget as z };
-//# sourceMappingURL=acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-1UJh0Qj4.mjs.map
+export { AXPConditionClauseWidget as $, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP as A, AXPCallbackValidationWidgetEditComponent as B, AXPCheckBoxWidget as C, AXPCheckBoxWidgetColumnComponent as D, AXPCheckBoxWidgetDesignerComponent as E, AXPCheckBoxWidgetEditComponent as F, AXPCheckBoxWidgetPrintComponent as G, AXPCheckBoxWidgetViewComponent as H, AXPCodeEditorWidget as I, AXPColorBoxWidget as J, AXPColorBoxWidgetColumnComponent as K, AXPColorBoxWidgetDesignerComponent as L, AXPColorBoxWidgetEditComponent as M, AXPColorBoxWidgetViewComponent as N, AXPColorChooserWidget as O, AXPColorChooserWidgetColumnComponent as P, AXPColorChooserWidgetDesignerComponent as Q, AXPColorChooserWidgetEditComponent as R, AXPColorChooserWidgetViewComponent as S, AXPColorPaletteWidget as T, AXPColorPaletteWidgetColumnComponent as U, AXPColorPaletteWidgetDesignerComponent as V, AXPColorPaletteWidgetEditComponent as W, AXPColorPaletteWidgetViewComponent as X, AXPConditionBuilderWidget as Y, AXPConditionBuilderWidgetEditComponent as Z, AXPConditionBuilderWidgetViewComponent as _, textBlockContentClass as a, AXPLargeTextWidgetPrintComponent as a$, AXPConditionClauseWidgetEditComponent as a0, AXPConnectedDragDropListsWidget as a1, AXPConnectedListsWidgetColumnComponent as a2, AXPConnectedListsWidgetEditComponent as a3, AXPConnectedListsWidgetViewComponent as a4, AXPContactWidget as a5, AXPContactWidgetColumnComponent as a6, AXPContactWidgetEditComponent as a7, AXPContactWidgetViewComponent as a8, AXPDataListColumnFooterComponent as a9, AXPFlexWidget as aA, AXPFlexWidgetDesignerComponent as aB, AXPFlexWidgetViewComponent as aC, AXPGetWidgetsForAIQuery as aD, AXPGreaterThanExpressionValidationWidget as aE, AXPGreaterThanValidationWidgetEditComponent as aF, AXPGridItemOptionsWidget as aG, AXPGridItemOptionsWidgetEditComponent as aH, AXPGridOptionsWidget as aI, AXPGridOptionsWidgetEditComponent as aJ, AXPImageMarkerPopupComponent as aK, AXPImageMarkerWidget as aL, AXPImageMarkerWidgetColumnComponent as aM, AXPImageMarkerWidgetEditComponent as aN, AXPImageMarkerWidgetViewComponent as aO, AXPIntegrationConnectionActionsService as aP, AXPIntegrationConnectionsPanelWidget as aQ, AXPIntegrationConnectionsPanelWidgetEditComponent as aR, AXPItemConfiguratorWidget as aS, AXPItemConfiguratorWidgetColumnComponent as aT, AXPItemConfiguratorWidgetEditComponent as aU, AXPJsonViewerWidget as aV, AXPJsonViewerWidgetEditComponent as aW, AXPJsonViewerWidgetViewComponent as aX, AXPLargeTextWidget as aY, AXPLargeTextWidgetColumnComponent as aZ, AXPLargeTextWidgetEditComponent as a_, AXPDataListWidget as aa, AXPDataListWidgetViewComponent as ab, AXPDataSourceOptionsWidget as ac, AXPDataSourceOptionsWidgetEditComponent as ad, AXPDateTimeBoxWidget as ae, AXPDateTimeBoxWidgetColumnComponent as af, AXPDateTimeBoxWidgetEditComponent as ag, AXPDateTimeBoxWidgetViewComponent as ah, AXPDirectionWidget as ai, AXPDirectionWidgetEditComponent as aj, AXPDragDropListWidget as ak, AXPEqualValidationWidget as al, AXPEqualValidationWidgetEditComponent as am, AXPFieldsetWidget as an, AXPFieldsetWidgetDesignerComponent as ao, AXPFieldsetWidgetViewComponent as ap, AXPFileViewerWidget as aq, AXPFileViewerWidgetEditComponent as ar, AXPFileViewerWidgetViewComponent as as, AXPFlexItemOptionsWidget as at, AXPFlexItemOptionsWidgetEditComponent as au, AXPFlexItemWidget as av, AXPFlexItemWidgetDesignerComponent as aw, AXPFlexItemWidgetViewComponent as ax, AXPFlexOptionsWidget as ay, AXPFlexOptionsWidgetEditComponent as az, AXPAdvancedGridItemWidget as b, AXPSelectBoxWidgetColumnComponent as b$, AXPLargeTextWidgetViewComponent as b0, AXPLessThanExpressionValidationWidget as b1, AXPLessThanValidationWidgetEditComponent as b2, AXPListStylingRulesExtendedWidget as b3, AXPListWidgetColumnComponent as b4, AXPListWidgetEditComponent as b5, AXPListWidgetViewComponent as b6, AXPLocalDataSourceSheetWidget as b7, AXPLocalDataSourceSheetWidgetEditComponent as b8, AXPMapWidgetEditComponent as b9, AXPProviderSelectWidgetColumnComponent as bA, AXPProviderSelectWidgetEditBase as bB, AXPProviderSelectWidgetViewComponent as bC, AXPQrcodeViewerService as bD, AXPQrcodeWidget as bE, AXPQrcodeWidgetColumnComponent as bF, AXPQrcodeWidgetEditComponent as bG, AXPQrcodeWidgetViewComponent as bH, AXPRatePickerWidget as bI, AXPRatePickerWidgetColumnComponent as bJ, AXPRatePickerWidgetEditComponent as bK, AXPRatePickerWidgetViewComponent as bL, AXPRegularExpressionValidationWidget as bM, AXPRegularExpressionValidationWidgetEditComponent as bN, AXPRepeaterWidget as bO, AXPRepeaterWidgetDesignerComponent as bP, AXPRepeaterWidgetEditComponent as bQ, AXPRepeaterWidgetViewComponent as bR, AXPRequiredValidationWidget as bS, AXPRequiredValidationWidgetEditComponent as bT, AXPRichTextWidget as bU, AXPRichTextWidgetColumnComponent as bV, AXPRichTextWidgetEditComponent as bW, AXPRichTextWidgetPrintComponent as bX, AXPRichTextWidgetViewComponent as bY, AXPSchedulerPickerWidget as bZ, AXPSelectBoxWidget as b_, AXPMapWidgetViewComponent as ba, AXPMaxLengthExpressionValidationWidget as bb, AXPMaxLengthValidationWidgetEditComponent as bc, AXPMinLengthExpressionValidationWidget as bd, AXPMinLengthValidationWidgetEditComponent as be, AXPNodeRendererWidget as bf, AXPNodeRendererWidgetDesignerComponent as bg, AXPNodeRendererWidgetEditComponent as bh, AXPNodeRendererWidgetViewComponent as bi, AXPNumberBoxWidget as bj, AXPNumberBoxWidgetColumnComponent as bk, AXPNumberBoxWidgetEditComponent as bl, AXPNumberBoxWidgetPrintComponent as bm, AXPNumberBoxWidgetViewComponent as bn, AXPOutcomeResultsViewerWidget as bo, AXPOutcomeResultsViewerWidgetViewComponent as bp, AXPPageWidget as bq, AXPPageWidgetViewComponent as br, AXPPasswordBoxWidget as bs, AXPPasswordBoxWidgetColumnComponent as bt, AXPPasswordBoxWidgetEditComponent as bu, AXPPasswordBoxWidgetViewComponent as bv, AXPProgressBarWidget as bw, AXPProgressBarWidgetColumnComponent as bx, AXPProgressBarWidgetEditComponent as by, AXPProgressBarWidgetViewComponent as bz, AXPAdvancedGridItemWidgetDesignerComponent as c, AXP_Flex_Box_Justify_Options as c$, AXPSelectBoxWidgetEditComponent as c0, AXPSelectBoxWidgetViewComponent as c1, AXPSelectLanguagePopup as c2, AXPSelectionListWidget as c3, AXPSelectionListWidgetColumnComponent as c4, AXPSelectionListWidgetDesignerComponent as c5, AXPSelectionListWidgetEditComponent as c6, AXPSelectionListWidgetViewComponent as c7, AXPSignatureWidget as c8, AXPSignatureWidgetColumnComponent as c9, AXPTemplateBoxWidgetEditComponent as cA, AXPTemplateBoxWidgetPrintComponent as cB, AXPTemplateBoxWidgetViewComponent as cC, AXPTextBoxWidget as cD, AXPTextBoxWidgetColumnComponent as cE, AXPTextBoxWidgetEditComponent as cF, AXPTextBoxWidgetPrintComponent as cG, AXPTextBoxWidgetViewComponent as cH, AXPToggleWidget as cI, AXPToggleWidgetColumnComponent as cJ, AXPToggleWidgetEditComponent as cK, AXPToggleWidgetPrintComponent as cL, AXPToggleWidgetViewComponent as cM, AXPWidgetFieldConfiguratorWidget as cN, AXPWidgetFieldConfiguratorWidgetColumnComponent as cO, AXPWidgetFieldConfiguratorWidgetEditComponent as cP, AXPWidgetsModule as cQ, AXP_ABSOLUTE_UNITS as cR, AXP_BORDER_RADIUS_UNITS as cS, AXP_BORDER_WIDTH_UNITS as cT, AXP_CONDITION_CLAUSE_WIDGET_NAME as cU, AXP_DATA_LIST_CMD_DELETE as cV, AXP_DATA_LIST_CMD_EDIT as cW, AXP_DATA_LIST_PENDING_DELETE_KEY as cX, AXP_DATETIME_FILTER_DEFAULT_OPERATOR as cY, AXP_Flex_Box_Align_Options as cZ, AXP_Flex_Box_Alignments as c_, AXPSignatureWidgetEditComponent as ca, AXPSignatureWidgetViewComponent as cb, AXPSpacingWidget as cc, AXPSpacingWidgetEditComponent as cd, AXPStatusChipComponent as ce, AXPStatusWidget as cf, AXPStatusWidgetColumnComponent as cg, AXPStatusWidgetEditComponent as ch, AXPStatusWidgetViewComponent as ci, AXPStepWizardWidget as cj, AXPStepWizardWidgetDesignerComponent as ck, AXPStepWizardWidgetViewComponent as cl, AXPStopwatchWidget as cm, AXPStopwatchWidgetViewComponent as cn, AXPTableItemWidget as co, AXPTableItemWidgetDesignerComponent as cp, AXPTableItemWidgetViewComponent as cq, AXPTableWidget as cr, AXPTableWidgetDesignerComponent as cs, AXPTableWidgetViewComponent as ct, AXPTagEditorWidget as cu, AXPTagEditorWidgetColumnComponent as cv, AXPTagEditorWidgetEditComponent as cw, AXPTagEditorWidgetViewComponent as cx, AXPTemplateBoxWidget as cy, AXPTemplateBoxWidgetColumnComponent as cz, AXPAdvancedGridItemWidgetViewComponent as d, AXP_Grid_Box_Align_Items_Options as d0, AXP_Grid_Box_Alignments as d1, AXP_Grid_Box_Justify_Items_Options as d2, AXP_LIST_STYLING_RULES_WIDGET_NAME as d3, AXP_LOCAL_DATA_SOURCE_SHEET_WIDGET_NAME as d4, AXP_RELATIVE_UNITS as d5, AXP_RELATIVE_UNITS_NO_PERCENT as d6, AXP_ROW_EXPR_PREFIX as d7, AXP_SELECT_COLUMN_RESOLVE_QUERY as d8, AXP_SELECT_FILTER_DEFAULT_OPERATOR as d9, AXP_SPACING_UNITS as da, AXP_default_Border_Box_Units as db, AXP_default_Border_Box_Value as dc, AXP_default_Spacing_Box_Units as dd, AXP_default_Spacing_Box_Value as de, DEFAULT_QRCODE_SIZE as df, DEFAULT_STRATEGY_CONFIG as dg, STRATEGY_CONFIG_TOKEN as dh, applyLeafVisibilityToDataListColumnTree as di, displayQrcodeAttachmentFileId as dj, flattenDataListWidgetColumns as dk, formatConditionBuilderChip as dl, formatConditionBuilderSentence as dm, isDataListColumnBand as dn, prepareNodeRendererChild as dp, qrcodeAttachmentImageUrl as dq, resolveColorChooserGroups as dr, resolveDataListColumnWidth as ds, resolveQrcodeDisplayMode as dt, tokensToPlainText as du, AXPAdvancedGridOptionsWidget as e, AXPAdvancedGridOptionsWidgetEditComponent as f, AXPAdvancedGridWidget as g, AXPAdvancedGridWidgetDesignerComponent as h, AXPAdvancedGridWidgetViewComponent as i, AXPAvatarWidget as j, AXPAvatarWidgetColumnComponent as k, AXPAvatarWidgetDesignerComponent as l, AXPAvatarWidgetEditComponent as m, AXPAvatarWidgetViewComponent as n, AXPBetweenExpressionValidationWidget as o, AXPBetweenValidationWidgetEditComponent as p, AXPBlockWidget as q, AXPBlockWidgetDesignerComponent as r, AXPBlockWidgetViewComponent as s, textBlockStyleAttribute as t, AXPBorderWidget as u, AXPBorderWidgetEditComponent as v, AXPButtonWidget as w, AXPButtonWidgetColumnComponent as x, AXPButtonWidgetViewComponent as y, AXPCallbackValidationWidget as z };
+//# sourceMappingURL=acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-CpmGqDUE.mjs.map