@acorex-platform/framework-client 0.0.33 → 0.0.38

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

@@ -21,12 +21,12 @@ import * as i1$7 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i1$5 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString as resolveMultiLanguageString$1 } from '@acorex/core/translation';
-import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPClipBoardService, AXPSettingsService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFileStorageService, resolveStoredImageDisplayUrl, resolveMediaViewerType, normalizeStoredImageRef, 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, AXPClipBoardService, AXPSettingsService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, 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 { AXPDeviceService, setupPopupFooterKeyboardShortcuts, ensureRuntimeSurfaceClass, AXPColorPaletteService, AXPDebugService, FORM_DIRTY_TRACE_NS, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPLogoComponent, AXPEntityBroadcastService, applyQueryArray, chordToKbdItemKeys, objectKeyValueTransforms } from '@acorex-platform/framework-client/core';
 import * as i1$4 from '@angular/common';
-import { CommonModule, AsyncPipe } from '@angular/common';
+import { CommonModule, AsyncPipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, ChangeDetectionStrategy, Component, InjectionToken, viewChild, effect, untracked, HostBinding, Directive, EventEmitter, linkedSignal, Injectable, model, input, ViewEncapsulation, DestroyRef, afterNextRender, ChangeDetectorRef, output, Input, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component, InjectionToken, viewChild, effect, untracked, HostBinding, Directive, EventEmitter, linkedSignal, Injectable, model, input, ViewEncapsulation, DestroyRef, EnvironmentInjector, ApplicationRef, afterNextRender, ChangeDetectorRef, output, Input, ElementRef, afterEveryRender, NgZone, NgModule } from '@angular/core';
 import * as i1$6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXLookupComponent } from '@acorex/components/lookup';
@@ -37,7 +37,7 @@ 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 } from '@acorex-platform/framework-shared/widget-core';
-import { AXPConditionBuilderComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPFileViewerComponent, AXPFileChooserDirective, normalizeFileViewerBoundValue, AXPStateMessageComponent, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPConditionBuilderComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPFileChooserService, createAttachedFileProviderMenu, AXPFileViewerComponent, AXPStateMessageComponent, normalizeFileViewerBoundValue, AXPOutcomeResultsViewerComponent, AXPSignatureEditorService, AXPStopwatchComponent, AXPWidgetFieldConfiguratorComponent, AXPItemConfiguratorComponent, AXPRepeaterRowsLayoutComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex-platform/framework-client/layout/components';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXColorUtil } from '@acorex/core/utils';
 import * as i2$3 from '@acorex/components/color-box';
@@ -69,6 +69,7 @@ import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import { AXRatePickerComponent } from '@acorex/components/rate-picker';
 import * as i2$5 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
+import { AXHighlightTextComponent } from '@acorex/components/highlight';
 import { AXComboBoxComponent } from '@acorex/components/combo-box';
 import * as i3$5 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
@@ -89,45 +90,40 @@ import * as i1$c from '@acorex/components/code-editor';
 import { AXCodeEditorModule } from '@acorex/components/code-editor';
 import * as i1$d from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import * as i1$e from '@acorex/components/media-viewer';
-import { AXMediaViewerModule } from '@acorex/components/media-viewer';
-import * as i1$f from '@acorex/components/image';
-import { AXImageModule } from '@acorex/components/image';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXToastService } from '@acorex/components/toast';
 import * as i6 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i6$1 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
-import * as i1$g from '@acorex/components/json-viewer';
+import * as i1$e from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
-import * as i1$h from '@acorex/components/map';
+import * as i1$f from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import * as i5$2 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXSchedulerPickerService, AXSchedulerPickerComponent } from '@acorex/components/scheduler-picker';
+import * as i3$6 from '@acorex/components/image';
+import { AXImageModule } from '@acorex/components/image';
 import * as i2$8 from '@acorex/components/paint';
 import { AXPaintModule } from '@acorex/components/paint';
-import * as i1$i from '@acorex/components/grid-layout-builder';
+import * as i1$g from '@acorex/components/grid-layout-builder';
 import { AXGridLayoutContainerComponent, AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';
 import { AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerFlexDrawerComponent } from '@acorex-platform/framework-client/layout/designer';
 import { moveItemInArray } from '@acorex/cdk/drag-drop';
-import * as i1$j from '@acorex/components/step-wizard';
+import * as i1$h from '@acorex/components/step-wizard';
 import { AXStepWizardModule } from '@acorex/components/step-wizard';
-import * as i1$k from '@acorex/components/button-group';
+import * as i1$i from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { provideFileViewer } from '@acorex/components/file-viewer';
-import * as i1$l from '@acorex/components/cron-job';
-import { AXCronJobModule } from '@acorex/components/cron-job';
 import { normalizeEntityMasterListLayoutType } from '@acorex-platform/framework-shared/entity';
-import * as i3$6 from '@acorex/components/time-duration';
+import * as i3$7 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
-import * as i1$m from '@acorex/components/alert';
+import * as i1$j from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i1$n from '@acorex/components/accordion';
+import * as i1$k from '@acorex/components/accordion';
 import { AXAccordionModule } from '@acorex/components/accordion';
 import { AXP_WIDGET_AI_AGENT_NAMES, parseWidgetCatalogMetadataJson, isValidWidgetAiAgentName, matchesWidgetAiAgent, AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT } from '@acorex-platform/framework-shared/runtime';
 export { AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT, AXP_WIDGET_AI_AGENT_CHART_LAYOUT, AXP_WIDGET_AI_AGENT_FORM_LAYOUT, AXP_WIDGET_AI_AGENT_NAMES, matchesWidgetAiAgent } from '@acorex-platform/framework-shared/runtime';
@@ -386,7 +382,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectLanguagePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (isMobile()) {\n<div class=\"flex flex-col w-full\">\n  <div class=\"flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-200\">\n    <span class=\"font-semibold truncate\">{{ currentLanguageTitle() || (\"@general:fields.language.title\" |\n      translate | async) }}</span>\n    @if (visibleLanguageList().length > 1) {\n    <ax-button (onClick)=\"openLanguagePicker()\" color=\"primary\"\n      [text]=\"('@general:actions.change.title' | translate | async)\"></ax-button>\n    }\n  </div>\n  <div class=\"flex-1 min-w-0 overflow-auto p-3\">\n    @if (activeLanguage(); as lang) {\n    <div class=\"flex flex-grow items-center justify-center\">\n      <axp-widgets-container class=\"flex flex-col gap-2 p-4\" [context]=\"lang.context\"\n        (onContextChanged)=\"handleContextChanged($event, lang)\">\n        <ng-container axp-widget-renderer [node]=\"lang.node\" [mode]=\"'edit'\"> </ng-container>\n      </axp-widgets-container>\n    </div>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"flex h-[max(70vh,20rem)]\">\n  <aside class=\"overflow-auto flex-shrink-0 min-w-[12rem] border-e border-neutral-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of visibleLanguageList(); track language.code) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"language.code\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"hasTranslationContent(language.context.value) ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"font-semibold self-start mb-4\">{{ language.title }}</p>\n          <div class=\"flex flex-grow items-center justify-center\">\n            <axp-widgets-container class=\"flex flex-col gap-2 p-4\" [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event, language)\">\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"flex-1 min-w-0 p-4 flex flex-col\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n}\n<ax-footer class=\"flex items-center justify-between gap-4\">\n  <ax-prefix class=\"flex items-center min-w-0\">\n    @if (hasLanguagesBeyondProfiles()) {\n    <ax-check-box [value]=\"showOtherLanguages()\" (onValueChanged)=\"onShowOtherLanguagesChanged($event)\">\n      <ax-label>{{ ('@general:widgets.multi-language-select.show-other-languages' | translate | async) }}</ax-label>\n    </ax-check-box>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button [text]=\"('@general:actions.cancel.title' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button color=\"primary\" [text]=\"('@general:actions.save.title' | translate | async)\"\n      (onClick)=\"onSaveButtonClick()\"></ax-button>\n  </ax-suffix>\n</ax-footer>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i5.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (isMobile()) {\n<div class=\"flex flex-col w-full\">\n  <div class=\"flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-200\">\n    <span class=\"font-semibold truncate\">{{ currentLanguageTitle() || (\"@general:fields.language.title\" |\n      translate | async) }}</span>\n    @if (visibleLanguageList().length > 1) {\n    <ax-button (onClick)=\"openLanguagePicker()\" color=\"primary\"\n      [text]=\"('@general:actions.change.title' | translate | async)\"></ax-button>\n    }\n  </div>\n  <div class=\"flex-1 min-w-0 overflow-auto p-3\">\n    @if (activeLanguage(); as lang) {\n    <div class=\"flex flex-grow items-center justify-center\">\n      <axp-widgets-container class=\"flex flex-col gap-2 p-4\" [context]=\"lang.context\"\n        (onContextChanged)=\"handleContextChanged($event, lang)\">\n        <ng-container axp-widget-renderer [node]=\"lang.node\" [mode]=\"'edit'\"> </ng-container>\n      </axp-widgets-container>\n    </div>\n    }\n  </div>\n</div>\n} @else {\n<div class=\"flex h-[max(70vh,20rem)]\">\n  <aside class=\"overflow-auto flex-shrink-0 min-w-[12rem] border-e border-neutral-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of visibleLanguageList(); track language.code) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"language.code\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"hasTranslationContent(language.context.value) ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"font-semibold self-start mb-4\">{{ language.title }}</p>\n          <div class=\"flex flex-grow items-center justify-center\">\n            <axp-widgets-container class=\"flex flex-col gap-2 p-4\" [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event, language)\">\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"flex-1 min-w-0 p-4 flex flex-col\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n}\n<ax-footer class=\"flex items-center justify-between gap-4\">\n  <ax-prefix class=\"flex items-center min-w-0\">\n    @if (hasLanguagesBeyondProfiles()) {\n    <ax-check-box [value]=\"showOtherLanguages()\" (onValueChanged)=\"onShowOtherLanguagesChanged($event)\">\n      <ax-label>{{ ('@general:widgets.multi-language-select.show-other-languages' | translate | async) }}</ax-label>\n    </ax-check-box>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button [text]=\"('@general:actions.cancel.title' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button color=\"primary\" [text]=\"('@general:actions.save.title' | translate | async)\"\n      (onClick)=\"onSaveButtonClick()\"></ax-button>\n  </ax-suffix>\n</ax-footer>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i5.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectLanguagePopup, decorators: [{
             type: Component,
@@ -798,7 +794,7 @@ class AXPButtonWidgetColumnComponent extends AXPColumnWidgetComponent {
         <ax-loading></ax-loading>
       }
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPButtonWidgetColumnComponent, decorators: [{
             type: Component,
@@ -914,7 +910,7 @@ class AXPButtonWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         <ax-loading> </ax-loading>
       }
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPButtonWidgetViewComponent, decorators: [{
             type: Component,
@@ -964,7 +960,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-button-widget-designer.component-BiWerYcu.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-button-widget-designer.component-BDOdcoyN.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -3460,7 +3456,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-lookup>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "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$7.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$7.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -3944,7 +3940,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 }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\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", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], 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 }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\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", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -4142,15 +4138,31 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             void this.translatePresets(presets);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#presetTranslateEffect" }] : /* istanbul ignore next */ []));
+        /**
+         * Revalidates when min/max or dependent rules change. Skips the first CD run and
+         * empty/pristine fields so create forms do not show required errors on open.
+         * `refresh()` still validates immediately; later runs revalidate when there is a
+         * value or the user already touched the field.
+         */
+        this.#hasCompletedInitialDependencyRevalidate = false;
+        this.#hasUserInteracted = false;
         this.#revalidateWhenDependenciesChange = effect(() => {
             if (this.filterMode()) {
                 return;
             }
             this.validationRules();
             this.minValue();
+            this.maxValue();
             this.validationRevision();
             untracked(() => {
+                if (!this.#hasCompletedInitialDependencyRevalidate) {
+                    this.#hasCompletedInitialDependencyRevalidate = true;
+                    return;
+                }
                 queueMicrotask(() => {
+                    if (!this.#shouldRevalidateStandardDateTimeBox()) {
+                        return;
+                    }
                     void this.standardDateTimeBox()?.validate();
                 });
             });
@@ -4192,11 +4204,23 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             this.selectedPresetId.set(presetId);
         }
     }
+    /**
+     * Revalidates when min/max or dependent rules change. Skips the first CD run and
+     * empty/pristine fields so create forms do not show required errors on open.
+     * `refresh()` still validates immediately; later runs revalidate when there is a
+     * value or the user already touched the field.
+     */
+    #hasCompletedInitialDependencyRevalidate;
+    #hasUserInteracted;
     #revalidateWhenDependenciesChange;
+    #shouldRevalidateStandardDateTimeBox() {
+        const value = this.getValue();
+        const hasValue = value != null && value !== '';
+        const box = this.standardDateTimeBox();
+        return hasValue || this.#hasUserInteracted || box?.dirty === true || box?.touched === true;
+    }
     validationTrackKey(validation, index) {
-        const compareValue = validation.options?.compareValue ??
-            validation.options?.value ??
-            `${validation.options?.min ?? ''}-${validation.options?.max ?? ''}`;
+        const compareValue = validation.options?.compareValue ?? validation.options?.value ?? `${validation.options?.min ?? ''}-${validation.options?.max ?? ''}`;
         return `${index}-${validation.rule}-${this.validationRevision()}-${compareValue}-${this.minValue() ?? ''}`;
     }
     validationMessage(validation) {
@@ -4210,6 +4234,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     }
     handleValueChange(e) {
         if (e.isUserInteraction) {
+            this.#hasUserInteracted = true;
             this.setValue(this.normalizeFieldValue(e.value));
         }
     }
@@ -4268,9 +4293,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     async translatePresets(presets) {
         const translated = await Promise.all(presets.map(async (preset) => ({
             id: preset.id,
-            title: preset.title.startsWith('@')
-                ? await this.translationService.translateAsync(preset.title)
-                : preset.title,
+            title: preset.title.startsWith('@') ? await this.translationService.translateAsync(preset.title) : preset.title,
         })));
         this.translatedPresets.set(translated);
     }
@@ -4502,21 +4525,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": "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\">\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          <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        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          <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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "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", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.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": "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\">\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          <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        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          <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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.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\">\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          <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        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          <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" }]
+            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\">\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          <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        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          <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" }]
         }], ctorParameters: () => [], propDecorators: { lookup: [{ type: i0.ViewChild, args: ['lookup', { isSignal: true }] }], standardDateTimeBox: [{ type: i0.ViewChild, args: ['standardDateTimeBox', { isSignal: true }] }], __class: [{
                 type: HostBinding,
                 args: ['class']
@@ -4947,7 +4960,15 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         this.currentLanguage = toSignal(this.translationService.langChanges$, {
             initialValue: this.translationService.getActiveLang(),
         });
-        this.getCurrentText = computed(() => this.translationService.resolve(this.getValue(), this.currentLanguage()), /* @ts-ignore */
+        this.getCurrentText = computed(() => {
+            const value = this.getValue();
+            if ((this.disabled() || this.readonly()) &&
+                typeof value === 'string' &&
+                value.trim().startsWith('@')) {
+                return this.translationService.translateSync(value.trim()) || value;
+            }
+            return this.translationService.resolve(value, this.currentLanguage());
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "getCurrentText" }] : /* istanbul ignore next */ []));
     }
     handleValueChange(e) {
@@ -5026,7 +5047,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -5595,7 +5616,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$8.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$8.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$5.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: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6886,7 +6907,7 @@ class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i1$5.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: AXPRichTextWidgetColumnComponent, decorators: [{
             type: Component,
@@ -7110,7 +7131,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, 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: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, 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: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$5.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: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -8122,7 +8143,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  >\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>\n  <span class=\"ax-lookup-option-text\">{{ getLookupItemLabel(item) | translate | async }}</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>\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\">{{ getLookupItemLabel(item) | translate | async }}</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", "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: 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", "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$5.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      ></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  >\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$5.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,
@@ -8132,11 +8153,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXComboBoxComponent,
                         AXDecoratorModule,
                         AXFormModule,
+                        AXHighlightTextComponent,
                         AXLookupComponent,
                         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  >\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>\n  <span class=\"ax-lookup-option-text\">{{ getLookupItemLabel(item) | translate | async }}</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>\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\">{{ getLookupItemLabel(item) | translate | async }}</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      ></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  >\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"] }]
         }], 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']
@@ -8405,7 +8427,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent
       [readonly]="readonly()"
     >
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -8525,7 +8547,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "size", "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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -9517,7 +9539,7 @@ class AXPTemplateBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTemplateBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -9804,7 +9826,13 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         this.setValue(nextValue);
     }
     getCurrentText() {
-        return this.translationService.resolve(this.getValue(), this.currentLanguage());
+        const value = this.getValue();
+        if ((this.disabled() || this.readonly()) &&
+            typeof value === 'string' &&
+            value.trim().startsWith('@')) {
+            return this.translationService.translateSync(value.trim()) || value;
+        }
+        return this.translationService.resolve(value, this.currentLanguage());
     }
     async openMultiLanguagePopup() {
         const node = {
@@ -9873,7 +9901,7 @@ class AXPTextBoxWidgetEditComponent extends AXPValueWidgetComponent {
         }
       </ax-text-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$7.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: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$7.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: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$5.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: AXPTextBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -10902,7 +10930,7 @@ class AXPAvatarWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer properties;axp-avatar-widget-edit .axp-empty{width:calc(var(--spacing, .25rem) * 28);height:calc(var(--spacing, .25rem) * 28);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}axp-avatar-widget-edit .axp-empty:hover{background-color:rgba(var(--ax-sys-color-primary-50))}axp-avatar-widget-edit .axp-empty.axp-state-error{border-color:rgba(var(--ax-sys-color-danger-surface))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ))}axp-avatar-widget-edit .axp-content{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 28);height:calc(var(--spacing, .25rem) * 28);overflow:hidden;border-radius:calc(infinity * 1px)}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%;cursor:pointer;background-size:cover;background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute;display:flex;display:none;height:100%;width:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex;background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{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-border-style: solid;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer properties;axp-avatar-widget-edit .axp-empty{width:calc(var(--spacing, .25rem) * 28);height:calc(var(--spacing, .25rem) * 28);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-primary-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}axp-avatar-widget-edit .axp-empty:hover{background-color:rgba(var(--ax-sys-color-primary-50))}axp-avatar-widget-edit .axp-empty.axp-state-error{border-color:rgba(var(--ax-sys-color-danger-surface))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ))}axp-avatar-widget-edit .axp-content{position:relative;display:flex;width:calc(var(--spacing, .25rem) * 28);height:calc(var(--spacing, .25rem) * 28);overflow:hidden;border-radius:calc(infinity * 1px)}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%;cursor:pointer;background-size:cover;background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute;display:flex;display:none;height:100%;width:100%;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex;background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:color-mix(in oklab,var(--color-black, #000) 30%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{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-border-style: solid;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAvatarWidgetEditComponent, decorators: [{
             type: Component,
@@ -11122,6 +11150,49 @@ const AXPAvatarWidget = {
     },
 };
 
+//#region ----- Code editor value coercion -----
+/**
+ * Code-editor widgets bind a string. Catalog fields often store object/array JSON.
+ * Coerce those values so column/view/edit never call string methods on non-strings.
+ */
+function coerceCodeEditorText(value, pretty = false) {
+    if (value == null) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    try {
+        return JSON.stringify(value, null, pretty ? 2 : 0) ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Edit mode binds a string. Writing that string over an object/array
+ * (`content`) breaks sibling nested paths such as `content.module`.
+ */
+function restoreCodeEditorBoundValue(text, current) {
+    if (current != null && typeof current === 'object') {
+        const trimmed = text?.trim() ?? '';
+        if (!trimmed) {
+            return current;
+        }
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return current;
+        }
+    }
+    return text;
+}
+//#endregion
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Component   ----
@@ -11129,10 +11200,7 @@ class AXPCodeEditorWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Computed Properties   ----
-        this.currentValue = computed(() => {
-            const value = this.getValue();
-            return value ?? '';
-        }, /* @ts-ignore */
+        this.currentValue = computed(() => coerceCodeEditorText(this.getValue(), true), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
         this.language = computed(() => {
             const options = this.options();
@@ -11144,37 +11212,42 @@ class AXPCodeEditorWidgetViewComponent extends AXPValueWidgetComponent {
             return options?.['lineNumbers'] ?? true;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lineNumbers" }] : /* istanbul ignore next */ []));
+        this.editorHeight = computed(() => {
+            const options = this.options();
+            return options?.['height'] ?? 'h-96';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorHeight" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCodeEditorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCodeEditorWidgetViewComponent, isStandalone: true, selector: "axp-code-editor-widget-view", host: { classAttribute: "block w-full" }, usesInheritance: true, ngImport: i0, template: `
-    <div class="w-full border rounded-md p-2" style="direction: ltr;">
+    <div class="w-full border rounded-md min-h-0 overflow-auto" style="direction: ltr;" [ngClass]="editorHeight()">
       <ax-code-editor
         [value]="currentValue()"
         [readonly]="true"
         [language]="language()"
         [lineNumbers]="lineNumbers()"
-        class="w-full h-full"
+        class="w-full"
       ></ax-code-editor>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCodeEditorWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-code-editor-widget-view',
                     template: `
-    <div class="w-full border rounded-md p-2" style="direction: ltr;">
+    <div class="w-full border rounded-md min-h-0 overflow-auto" style="direction: ltr;" [ngClass]="editorHeight()">
       <ax-code-editor
         [value]="currentValue()"
         [readonly]="true"
         [language]="language()"
         [lineNumbers]="lineNumbers()"
-        class="w-full h-full"
+        class="w-full"
       ></ax-code-editor>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXCodeEditorModule],
+                    imports: [AXCodeEditorModule, NgClass],
                     host: {
                         class: 'block w-full',
                     },
@@ -11193,10 +11266,7 @@ class AXPCodeEditorWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Computed Properties   ----
-        this.currentValue = computed(() => {
-            const value = this.getValue();
-            return value ?? '';
-        }, /* @ts-ignore */
+        this.currentValue = computed(() => coerceCodeEditorText(this.getValue(), true), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
         this.language = computed(() => {
             const options = this.options();
@@ -11208,44 +11278,57 @@ class AXPCodeEditorWidgetEditComponent extends AXPValueWidgetComponent {
             return options?.['lineNumbers'] ?? true;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lineNumbers" }] : /* istanbul ignore next */ []));
-        this.editorClass = computed(() => {
+        this.editorHeight = computed(() => {
+            const options = this.options();
+            return options?.['height'] ?? 'h-96';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorHeight" }] : /* istanbul ignore next */ []));
+        this.isReadOnly = computed(() => {
             const options = this.options();
-            const height = options?.['height'] ?? 'min-h-96';
-            return `w-full h-full ${height}`;
+            return options?.['readOnly'] === true || options?.['readonly'] === true || options?.['disabled'] === true;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "editorClass" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----   Event Handlers   ----
     handleValueChange(newValue) {
-        this.setValue(newValue);
+        if (this.isReadOnly()) {
+            return;
+        }
+        this.setValue(restoreCodeEditorBoundValue(newValue, this.getValue()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCodeEditorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCodeEditorWidgetEditComponent, isStandalone: true, selector: "axp-code-editor-widget-edit", host: { classAttribute: "block w-full ltr" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="w-full min-h-0 overflow-auto" [ngClass]="editorHeight()">
       <ax-code-editor
         [ngModel]="currentValue()"
         (ngModelChange)="handleValueChange($event)"
         [language]="language()"
         [lineNumbers]="lineNumbers()"
-        [class]="editorClass()"
+        [readonly]="isReadOnly()"
+        class="w-full"
       ></ax-code-editor>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCodeEditorWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-code-editor-widget-edit',
                     template: `
+    <div class="w-full min-h-0 overflow-auto" [ngClass]="editorHeight()">
       <ax-code-editor
         [ngModel]="currentValue()"
         (ngModelChange)="handleValueChange($event)"
         [language]="language()"
         [lineNumbers]="lineNumbers()"
-        [class]="editorClass()"
+        [readonly]="isReadOnly()"
+        class="w-full"
       ></ax-code-editor>
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, AXCodeEditorModule],
+                    imports: [FormsModule, AXCodeEditorModule, NgClass],
                     host: {
                         class: 'block w-full ltr',
                     },
@@ -11264,17 +11347,13 @@ class AXPCodeEditorWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Computed Properties   ----
-        this.fullValue = computed(() => {
-            const value = this.rawValue;
-            return value ?? '';
-        }, /* @ts-ignore */
+        this.fullValue = computed(() => coerceCodeEditorText(this.rawValue), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fullValue" }] : /* istanbul ignore next */ []));
         this.displayText = computed(() => {
             const value = this.fullValue();
             if (!value) {
                 return '';
             }
-            // Trim whitespace and normalize line breaks
             const trimmed = value.trim().replace(/\r\n/g, '\n').replace(/\r/g, '\n');
             // If empty after trimming, return empty
             if (!trimmed) {
@@ -11861,7 +11940,25 @@ const FileViewerWebhookKeys = {
     AfterFilesAdded: 'file-viewer.afterFilesAdded',
 };
 
-//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
+const FILE_VIEWER_UPLOAD_ACTION = 'upload';
+//#endregion
+//#region ----- Helpers -----
+function resolveChooserMenuTarget(event) {
+    if (!event) {
+        return null;
+    }
+    const source = event.currentTarget instanceof HTMLElement
+        ? event.currentTarget
+        : event.target instanceof HTMLElement
+            ? event.target
+            : null;
+    if (!source) {
+        return null;
+    }
+    return source.closest('button, ax-button') ?? source;
+}
 //#endregion
 //#region ----- Component -----
 class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
@@ -11869,6 +11966,13 @@ class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         //#region ----- Services & Dependencies -----
         this.hooks = inject(AXPHookService);
+        this.chooserService = inject(AXPFileChooserService);
+        this.translation = inject(AXTranslationService);
+        this.envInjector = inject(EnvironmentInjector);
+        this.appRef = inject(ApplicationRef);
+        this.providerMenu = createAttachedFileProviderMenu(this.envInjector, this.appRef, (key) => {
+            void this.runChooser(key);
+        });
         //#endregion
         //#region ----- Computed Properties -----
         this.thumbnail = computed(() => this.options()['thumbnail'] ?? true, /* @ts-ignore */
@@ -11905,6 +12009,46 @@ class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
         //#region ----- State Signals -----
         this.isChoosing = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isChoosing" }] : /* istanbul ignore next */ []));
+        this.locale = toSignal(this.translation.currentLocale$, {
+            initialValue: this.translation.getActiveLang(),
+        });
+        //#endregion
+        //#region ----- Header Actions -----
+        /**
+         * Custom headerActions replace the container's built-in download/fullscreen buttons,
+         * so those actions are included whenever upload is shown.
+         */
+        this.headerActions = computed(() => {
+            this.locale();
+            if (!this.allowUpload()) {
+                return [];
+            }
+            const actions = [
+                {
+                    name: FILE_VIEWER_UPLOAD_ACTION,
+                    text: this.translation.translateSync('@general:actions.add-item.title'),
+                    icon: 'fa-light fa-plus',
+                    disabled: this.isChoosing(),
+                    isLoading: this.isChoosing(),
+                },
+            ];
+            if (this.downloadButton()) {
+                actions.push({
+                    name: 'download',
+                    text: this.translation.translateSync('@general:actions.download.title'),
+                    icon: 'fa-light fa-download',
+                });
+            }
+            if (this.fullScreenButton()) {
+                actions.push({
+                    name: 'fullscreen',
+                    text: this.translation.translateSync('@platform-layout-widgets:widgets.file-viewer.actions.fullscreen'),
+                    icon: 'fa-light fa-expand',
+                });
+            }
+            return actions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- View Queries -----
         this.fileViewer = viewChild('fileViewer', /* @ts-ignore */
@@ -11918,8 +12062,40 @@ class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
             }
         });
     }
+    ngOnDestroy() {
+        this.providerMenu.destroy();
+    }
     //#endregion
     //#region ----- Event Handlers -----
+    onHeaderActionClick(event) {
+        if (event.item.name !== FILE_VIEWER_UPLOAD_ACTION) {
+            return;
+        }
+        this.onUploadAction(event.nativeEvent);
+    }
+    onUploadAction(event) {
+        if (this.isChoosing()) {
+            return;
+        }
+        const nativeEvent = event instanceof Event ? event : event?.nativeEvent;
+        const providers = this.chooserService.getProviders(this.chooserContext().options).map((provider) => ({
+            key: provider.key,
+            title: provider.title,
+            icon: provider.icon,
+        }));
+        if (providers.length === 0) {
+            return;
+        }
+        if (providers.length === 1) {
+            void this.runChooser(providers[0].key);
+            return;
+        }
+        const target = resolveChooserMenuTarget(nativeEvent);
+        if (!target) {
+            return;
+        }
+        this.providerMenu.open(target, providers, this.isChoosing());
+    }
     async onChooserItemsChanged(next) {
         const current = this.getValue() ?? [];
         const currentIds = new Set(current.map((file) => file.id));
@@ -11934,6 +12110,19 @@ class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
     }
     //#endregion
     //#region ----- Data Loading -----
+    async runChooser(providerKey) {
+        this.providerMenu.close();
+        this.isChoosing.set(true);
+        try {
+            const result = await this.chooserService.choose(providerKey, this.chooserContext());
+            if (result) {
+                await this.onChooserItemsChanged(result);
+            }
+        }
+        finally {
+            this.isChoosing.set(false);
+        }
+    }
     async processChosenItems(items) {
         if (items.length === 0) {
             return;
@@ -11969,7 +12158,7 @@ class AXPFileViewerWidgetEditComponent extends AXPValueWidgetComponent {
         await this.processChosenItems(newFileItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFileViewerWidgetEditComponent, isStandalone: true, selector: "axp-file-viewer-widget-edit", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "fileViewer", first: true, predicate: ["fileViewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex h-full flex-col gap-2\">\n  <!-- ----- Upload action when chooser is enabled ----- -->\n  @if (allowUpload()) {\n    <div class=\"flex justify-start\">\n      <ax-button\n        axpFileChooser\n        class=\"ax-sm\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-item.title' | translate | async\"\n        [context]=\"chooserContext()\"\n        [items]=\"files()\"\n        [busy]=\"isChoosing()\"\n        (itemsChange)=\"onChooserItemsChanged($event)\"\n        (busyChange)=\"isChoosing.set($event)\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <axp-file-viewer\n    #fileViewer\n    class=\"min-h-0 flex-1\"\n    [files]=\"files()\"\n    [startIndex]=\"startIndex()\"\n    [thumbnail]=\"thumbnail()\"\n    [download]=\"downloadButton()\"\n    [fullscreen]=\"fullScreenButton()\"\n    [loading]=\"isChoosing()\"\n  />\n</div>\n", dependencies: [{ kind: "component", type: AXPFileViewerComponent, selector: "axp-file-viewer", inputs: ["items", "files", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "galleryMode", "loading", "height", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs"], outputs: ["fullscreenClosed"] }, { 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: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPFileChooserDirective, selector: "[axpFileChooser]", inputs: ["context", "disabled", "items", "busy"], outputs: ["itemsChange", "busyChange"] }, { kind: "pipe", type: i1$5.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: AXPFileViewerWidgetEditComponent, isStandalone: true, selector: "axp-file-viewer-widget-edit", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "fileViewer", first: true, predicate: ["fileViewer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- ----- Empty state; upload stays available when the carousel has no files ----- -->\n<ng-template #emptyContent>\n  <axp-state-message\n    icon=\"fa-light fa-file-lines\"\n    [title]=\"'@platform-layout-widgets:widgets.file-viewer.empty.title'\"\n    [description]=\"'@platform-layout-widgets:widgets.file-viewer.empty.description'\"\n  >\n    @if (allowUpload()) {\n      <!-- ----- Upload action for the empty viewer ----- -->\n      <ax-button\n        slot=\"actions\"\n        class=\"ax-sm\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-item.title' | translate | async\"\n        [disabled]=\"isChoosing()\"\n        (onClick)=\"onUploadAction($event)\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    }\n  </axp-state-message>\n</ng-template>\n\n<axp-file-viewer\n  #fileViewer\n  class=\"h-full\"\n  [files]=\"files()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [download]=\"downloadButton()\"\n  [fullscreen]=\"fullScreenButton()\"\n  [loading]=\"isChoosing()\"\n  [headerActions]=\"headerActions()\"\n  [emptyContent]=\"emptyContent\"\n  (headerActionClick)=\"onHeaderActionClick($event)\"\n/>\n", dependencies: [{ kind: "component", type: AXPFileViewerComponent, selector: "axp-file-viewer", inputs: ["items", "files", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "galleryMode", "loading", "height", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs", "emptyContent", "emptyContentInputs", "headerActions"], outputs: ["headerActionClick", "fullscreenClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { 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: AXButtonModule }, { kind: "component", type: i1$1.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$5.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: AXPFileViewerWidgetEditComponent, decorators: [{
             type: Component,
@@ -11978,12 +12167,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[style.height]': 'height()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXPFileViewerComponent,
+                        AXPStateMessageComponent,
                         AXDecoratorModule,
                         AXButtonModule,
                         AXTranslationModule,
-                        AXPFileChooserDirective,
                         AsyncPipe,
-                    ], template: "<div class=\"flex h-full flex-col gap-2\">\n  <!-- ----- Upload action when chooser is enabled ----- -->\n  @if (allowUpload()) {\n    <div class=\"flex justify-start\">\n      <ax-button\n        axpFileChooser\n        class=\"ax-sm\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-item.title' | translate | async\"\n        [context]=\"chooserContext()\"\n        [items]=\"files()\"\n        [busy]=\"isChoosing()\"\n        (itemsChange)=\"onChooserItemsChanged($event)\"\n        (busyChange)=\"isChoosing.set($event)\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <axp-file-viewer\n    #fileViewer\n    class=\"min-h-0 flex-1\"\n    [files]=\"files()\"\n    [startIndex]=\"startIndex()\"\n    [thumbnail]=\"thumbnail()\"\n    [download]=\"downloadButton()\"\n    [fullscreen]=\"fullScreenButton()\"\n    [loading]=\"isChoosing()\"\n  />\n</div>\n" }]
+                    ], template: "<!-- ----- Empty state; upload stays available when the carousel has no files ----- -->\n<ng-template #emptyContent>\n  <axp-state-message\n    icon=\"fa-light fa-file-lines\"\n    [title]=\"'@platform-layout-widgets:widgets.file-viewer.empty.title'\"\n    [description]=\"'@platform-layout-widgets:widgets.file-viewer.empty.description'\"\n  >\n    @if (allowUpload()) {\n      <!-- ----- Upload action for the empty viewer ----- -->\n      <ax-button\n        slot=\"actions\"\n        class=\"ax-sm\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-item.title' | translate | async\"\n        [disabled]=\"isChoosing()\"\n        (onClick)=\"onUploadAction($event)\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    }\n  </axp-state-message>\n</ng-template>\n\n<axp-file-viewer\n  #fileViewer\n  class=\"h-full\"\n  [files]=\"files()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [download]=\"downloadButton()\"\n  [fullscreen]=\"fullScreenButton()\"\n  [loading]=\"isChoosing()\"\n  [headerActions]=\"headerActions()\"\n  [emptyContent]=\"emptyContent\"\n  (headerActionClick)=\"onHeaderActionClick($event)\"\n/>\n" }]
         }], propDecorators: { fileViewer: [{ type: i0.ViewChild, args: ['fileViewer', { isSignal: true }] }] } });
 
 var fileViewerWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -11997,6 +12186,14 @@ var fileViewerWidgetEdit_component = /*#__PURE__*/Object.freeze({
 class AXPFileViewerWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----- Constants -----
+        this.emptyContent = AXPStateMessageComponent;
+        this.emptyContentInputs = {
+            icon: 'fa-light fa-file-lines',
+            title: '@platform-layout-widgets:widgets.file-viewer.empty.title',
+            description: '@platform-layout-widgets:widgets.file-viewer.empty.description',
+        };
+        //#endregion
         //#region ----- Computed Properties -----
         this.internalValue = computed(() => normalizeFileViewerBoundValue(this.getValue()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
@@ -12010,14 +12207,14 @@ class AXPFileViewerWidgetViewComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFileViewerWidgetViewComponent, isStandalone: true, selector: "axp-file-viewer-widget-view", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, usesInheritance: true, ngImport: i0, template: "@if (internalValue().length) {\n  <axp-file-viewer\n    class=\"h-full\"\n    [files]=\"internalValue()\"\n    [thumbnail]=\"thumbnail()\"\n    [download]=\"downloadButton()\"\n    [fullscreen]=\"fullScreenButton()\"\n  />\n}\n<!-- ----- Empty state when no files are bound ----- -->\n@else {\n  <axp-state-message\n    icon=\"fa-light fa-file-lines\"\n    [title]=\"'@general:no-media.title'\"\n    [description]=\"'@general:no-media.description'\"\n  />\n}\n", dependencies: [{ kind: "component", type: AXPFileViewerComponent, selector: "axp-file-viewer", inputs: ["items", "files", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "galleryMode", "loading", "height", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs"], outputs: ["fullscreenClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPFileViewerWidgetViewComponent, isStandalone: true, selector: "axp-file-viewer-widget-view", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, usesInheritance: true, ngImport: i0, template: "<axp-file-viewer\n  class=\"h-full\"\n  [files]=\"internalValue()\"\n  [thumbnail]=\"thumbnail()\"\n  [download]=\"downloadButton()\"\n  [fullscreen]=\"fullScreenButton()\"\n  [emptyContent]=\"emptyContent\"\n  [emptyContentInputs]=\"emptyContentInputs\"\n/>\n", dependencies: [{ kind: "component", type: AXPFileViewerComponent, selector: "axp-file-viewer", inputs: ["items", "files", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "galleryMode", "loading", "height", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs", "emptyContent", "emptyContentInputs", "headerActions"], outputs: ["headerActionClick", "fullscreenClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-file-viewer-widget-view', host: {
                         class: 'block',
                         '[style.height]': 'height()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPFileViewerComponent, AXPStateMessageComponent], template: "@if (internalValue().length) {\n  <axp-file-viewer\n    class=\"h-full\"\n    [files]=\"internalValue()\"\n    [thumbnail]=\"thumbnail()\"\n    [download]=\"downloadButton()\"\n    [fullscreen]=\"fullScreenButton()\"\n  />\n}\n<!-- ----- Empty state when no files are bound ----- -->\n@else {\n  <axp-state-message\n    icon=\"fa-light fa-file-lines\"\n    [title]=\"'@general:no-media.title'\"\n    [description]=\"'@general:no-media.description'\"\n  />\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPFileViewerComponent], template: "<axp-file-viewer\n  class=\"h-full\"\n  [files]=\"internalValue()\"\n  [thumbnail]=\"thumbnail()\"\n  [download]=\"downloadButton()\"\n  [fullscreen]=\"fullScreenButton()\"\n  [emptyContent]=\"emptyContent\"\n  [emptyContentInputs]=\"emptyContentInputs\"\n/>\n" }]
         }] });
 
 var fileViewerWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -12072,826 +12269,71 @@ const AXPFileViewerWidget = {
     },
 };
 
-const GalleryWebhookKeys = {
-    BeforeFilesAdded: 'gallery.beforeFilesAdded',
-    AfterFilesAdded: 'gallery.afterFilesAdded',
-};
+class AXPImageMarkerPopupComponent extends AXBasePageComponent {
+    ngOnInit() {
+        this.node = {
+            name: 'image-marker-popup-view',
+            type: 'image-marker',
+            options: this.options,
+            defaultValue: this.value,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageMarkerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPImageMarkerPopupComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <axp-widgets-container>
+      <ng-container axp-widget-renderer [node]="node" mode="view"></ng-container>
+    </axp-widgets-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageMarkerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AXPWidgetCoreModule],
+                    template: `
+    <axp-widgets-container>
+      <ng-container axp-widget-renderer [node]="node" mode="view"></ng-container>
+    </axp-widgets-container>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
-class AXPGalleryWidgetEditComponent extends AXPValueWidgetComponent {
+class AXPImageMarkerWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
-        super(...arguments);
-        this.thumbnail = computed(() => this.options()['thumbnail'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "thumbnail" }] : /* istanbul ignore next */ []));
-        this.height = computed(() => this.options()['height'] ?? '30rem', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        this.header = computed(() => this.options()['header'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.fileInfo = computed(() => this.options()['fileInfo'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fileInfo" }] : /* istanbul ignore next */ []));
-        this.fullScreenButton = computed(() => this.options()['fullScreenButton'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : /* istanbul ignore next */ []));
-        this.downloadButton = computed(() => this.options()['downloadButton'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadButton" }] : /* istanbul ignore next */ []));
-        this.allowUploadTypes = computed(() => this.options()['allowUploadTypes'] ?? [`image/*`], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowUploadTypes" }] : /* istanbul ignore next */ []));
-        this.allowUpload = computed(() => this.options()['allowUpload'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowUpload" }] : /* istanbul ignore next */ []));
-        this.startIndex = computed(() => {
-            const index = this.options()['startIndex'];
-            return typeof index === 'number' && index >= 0 ? index : 0;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "startIndex" }] : /* istanbul ignore next */ []));
-        this.hooks = inject(AXPHookService);
-        this.fileStorageService = inject(AXPFileStorageService);
-        this.loadingDialog = inject(AXLoadingDialogService);
-        this.translationService = inject(AXTranslationService);
-        this.gallery = viewChild('c', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "gallery" }] : /* istanbul ignore next */ []));
-        this.isChoosing = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isChoosing" }] : /* istanbul ignore next */ []));
-        this.files = computed(() => this.getValue() ?? [], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
-        this.chooserContext = computed(() => ({
-            options: {
-                multiple: true,
-                accept: this.allowUploadTypes().join(','),
-                scope: this.options()['scope'],
-                destination: this.options()['destination'],
-                excludeProviders: this.options()['excludeProviders'],
-            },
-            items: this.getValue() ?? [],
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chooserContext" }] : /* istanbul ignore next */ []));
-        /** Navigate to the requested start index once the media viewer is rendered. */
-        this.navigateToStartIndex = afterNextRender(() => {
-            const index = this.startIndex();
-            if (index > 0) {
-                setTimeout(() => this.gallery()?.goToIndex(index), 100);
+        super();
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.rawImage = computed(() => this.options?.image, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rawImage" }] : /* istanbul ignore next */ []));
+        this.rawPoints = () => this.rawValue;
+        this.imageUrl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const imageSource = this.rawImage();
+            const currentUrl = this.imageUrl();
+            if (currentUrl && currentUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(currentUrl);
             }
-        });
-        /** Object URLs created for blobs/binary; revoked on destroy for memory safety. */
-        this.objectUrls = new Set();
-        /**
-         * Convert AXPFileListItem[] to AXMediaViewerData[] for display in media viewer.
-         * Uses lazy-loading callbacks for URL resolution.
-         */
-        this.mediaViewerData = computed(() => {
-            const fileItems = this.getValue() ?? [];
-            return fileItems.map((file) => this.fileItemToMediaViewerData(file));
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mediaViewerData" }] : /* istanbul ignore next */ []));
-    }
-    /** Downloads the file at the current media viewer index. */
-    async download() {
-        const galleryRef = this.gallery();
-        const files = this.getValue() ?? [];
-        if (!galleryRef || files.length === 0) {
-            return;
-        }
-        const index = galleryRef.getActiveIndex();
-        const file = files[index];
-        if (!file) {
-            return;
-        }
-        const loadingDialogRef = this.loadingDialog.show({
-            title: await this.translationService.translateAsync('@general:actions.download.processing'),
-            mode: 'indeterminate',
-            progressColor: 'primary',
-            status: await this.translationService.translateAsync('@general:actions.download.processing'),
-        });
-        try {
-            const url = await this.resolveFileUrl(file);
-            if (!url) {
-                return;
+            if (typeof imageSource === 'string') {
+                this.imageUrl.set(imageSource);
             }
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = file.name ?? 'download';
-            link.target = '_blank';
-            link.rel = 'noopener noreferrer';
-            link.click();
-            link.remove();
-        }
-        finally {
-            loadingDialogRef.close();
-        }
-    }
-    /**
-     * Handle items returned from file chooser providers (system, drive, etc.).
-     * Providers return the merged list; only newly added items are processed.
-     */
-    async onChooserItemsChanged(next) {
-        const current = this.getValue() ?? [];
-        const currentIds = new Set(current.map((file) => file.id));
-        const added = next.filter((file) => file.id != null && !currentIds.has(file.id));
-        if (added.length === 0) {
-            return;
-        }
-        await this.processChosenItems(added);
+            else if (imageSource instanceof URL) {
+                this.imageUrl.set(imageSource.href);
+            }
+            else if (imageSource instanceof Blob) {
+                this.imageUrl.set(URL.createObjectURL(imageSource));
+            }
+            else if (imageSource instanceof ArrayBuffer) {
+                const blob = new Blob([imageSource]);
+                this.imageUrl.set(URL.createObjectURL(blob));
+            }
+            else {
+                this.imageUrl.set(null);
+            }
+        });
     }
-    /**
-     * Process items returned from file chooser providers.
-     */
-    async processChosenItems(items) {
-        if (items.length === 0) {
-            return;
-        }
-        await this.hooks.runAsync(GalleryWebhookKeys.BeforeFilesAdded, {
-            host: this,
-            newFiles: items,
-        });
-        const newValue = [...(this.getValue() ?? []), ...items];
-        this.setValue(newValue);
-        await this.hooks.runAsync(GalleryWebhookKeys.AfterFilesAdded, {
-            host: this,
-            newFiles: items,
-        });
-        setTimeout(() => {
-            this.gallery()?.goToIndex(newValue.length - 1);
-        }, 100);
-    }
-    /**
-     * Format file size with appropriate unit (B, KB, MB, GB, etc.)
-     * Divides by 1000 until the value is less than 1000
-     */
-    formatFileSize(size) {
-        if (!size) {
-            return '';
-        }
-        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-        let value = size;
-        let unitIndex = 0;
-        while (value >= 1000 && unitIndex < units.length - 1) {
-            value /= 1000;
-            unitIndex++;
-        }
-        // Round to 2 decimal places, but remove trailing zeros
-        const roundedValue = Math.round(value * 100) / 100;
-        return `${roundedValue} ${units[unitIndex]}`;
-    }
-    /**
-     * Convert AXPFileListItem to AXMediaViewerData for display in media viewer.
-     * Uses lazy-loading callbacks for URL and thumbnail resolution.
-     */
-    fileItemToMediaViewerData(file) {
-        const mediaType = resolveMediaViewerType(file.name);
-        const urlCallback = () => this.resolveFileUrl(file);
-        const thumbnailCallback = mediaType === 'image' || mediaType === 'video'
-            ? () => this.resolveFileUrl(file)
-            : undefined;
-        return {
-            id: file.id ??
-                `media-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
-            name: file.name,
-            type: mediaType,
-            url: urlCallback,
-            thumbnailUrl: thumbnailCallback,
-            size: this.formatFileSize(file.size),
-        };
-    }
-    /**
-     * Resolve the URL for a file item.
-     * Returns a promise that resolves to the file URL.
-     */
-    /**
-     * Register an object URL for later revocation on destroy (memory safety).
-     */
-    trackObjectUrl(url) {
-        if (url.startsWith('blob:')) {
-            this.objectUrls.add(url);
-        }
-        return url;
-    }
-    async resolveFileUrl(file) {
-        // Blob source - create object URL
-        if (file.source?.kind === 'blob' && file.source.value instanceof Blob) {
-            return this.trackObjectUrl(URL.createObjectURL(file.source.value));
-        }
-        // File ID source - fetch from storage service
-        if (file.source?.kind === 'fileId' &&
-            typeof file.source.value === 'string') {
-            const fileId = normalizeStoredImageRef(file.source.value) ?? file.source.value;
-            const fileInfo = await this.fileStorageService.getInfo(fileId);
-            if (fileInfo?.url)
-                return fileInfo.url;
-            if (fileInfo?.binary)
-                return this.trackObjectUrl(URL.createObjectURL(fileInfo.binary));
-            return '';
-        }
-        // URL source - return directly
-        if (file.source?.kind === 'url' && typeof file.source.value === 'string') {
-            return file.source.value;
-        }
-        // String value - check if it's already a URL or needs resolution
-        if (typeof file.source?.value === 'string') {
-            const value = file.source.value;
-            // Already a blob URL or data URL - use directly
-            if (value.startsWith('blob:') ||
-                value.startsWith('data:') ||
-                value.startsWith('http')) {
-                return value;
-            }
-            // Assume it's a file ID - fetch from storage service
-            const fileId = normalizeStoredImageRef(value) ?? value;
-            const fileInfo = await this.fileStorageService.getInfo(fileId);
-            if (fileInfo?.url)
-                return fileInfo.url;
-            if (fileInfo?.binary)
-                return this.trackObjectUrl(URL.createObjectURL(fileInfo.binary));
-            return '';
-        }
-        return '';
-    }
-    ngOnDestroy() {
-        for (const url of this.objectUrls) {
-            URL.revokeObjectURL(url);
-        }
-        this.objectUrls.clear();
-    }
-    /**
-     * Process files from drag-drop or other raw File sources.
-     */
-    async processFiles(files) {
-        if (files.length === 0) {
-            return;
-        }
-        const newFileItems = files.map((file) => ({
-            id: AXPDataGenerator.uuid(),
-            name: file.name,
-            size: file.size,
-            status: 'attached',
-            source: {
-                kind: 'blob',
-                value: file,
-            },
-        }));
-        await this.processChosenItems(newFileItems);
-    }
-    //#region ---- Drag & Drop Handlers ----
-    onFileChange(event) {
-        void this.processFiles(event.files);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGalleryWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPGalleryWidgetEditComponent, isStandalone: true, selector: "axp-gallery-widget-edit", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "gallery", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ax-media-viewer-container
-    style="height: 75vh;"
-    [thumbnail]="thumbnail()"
-    #c
-    [dataArray]="mediaViewerData()"
-  >
-    @if (header()) {
-      <ax-header>
-        @if (allowUpload()) {
-          <ax-prefix>
-            <ax-button
-              axpFileChooser
-              class="ax-sm"
-              color="primary"
-              [text]="'@general:actions.add-item.title' | translate | async"
-              [context]="chooserContext()"
-              [items]="files()"
-              [busy]="isChoosing()"
-              (itemsChange)="onChooserItemsChanged($event)"
-              (busyChange)="isChoosing.set($event)"
-            >
-              <ax-prefix>
-                <ax-icon icon="fa-light fa-plus"></ax-icon>
-              </ax-prefix>
-            </ax-button>
-          </ax-prefix>
-        }
-
-        @if (fileInfo()) {
-          <ax-file-info></ax-file-info>
-        }
-
-        <ax-suffix>
-          @if (downloadButton()) {
-            <ax-button
-              class="ax-sm"
-              look="blank"
-              (click)="download()"
-              [disabled]="mediaViewerData().length === 0"
-            >
-              <ax-icon icon="fa-light fa-download"></ax-icon>
-            </ax-button>
-          }
-          @if (fullScreenButton()) {
-            <ax-fullscreen-button> </ax-fullscreen-button>
-          }
-        </ax-suffix>
-      </ax-header>
-    }
-
-    <ax-prefix>
-      <ax-button
-        class="ax-sm"
-        (click)="c.next()"
-        [disabled]="c.getActiveIndex() === this.mediaViewerData().length - 1"
-      >
-        <ax-icon class="rtl:rotate-180 ax-icon ax-icon-chevron-right">
-        </ax-icon>
-      </ax-button>
-    </ax-prefix>
-
-    <ax-suffix>
-      <ax-button
-        class="ax-sm"
-        (click)="c.prev()"
-        [disabled]="c.getActiveIndex() === 0"
-      >
-        <ax-icon class="rtl:rotate-180 ax-icon ax-icon-chevron-left">
-        </ax-icon>
-      </ax-button>
-    </ax-suffix>
-  </ax-media-viewer-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMediaViewerModule }, { kind: "component", type: i1$e.AXMediaViewerContainerComponent, selector: "ax-media-viewer-container", inputs: ["dataArray", "thumbnail", "pagination"] }, { kind: "component", type: i1$e.AXFileInfoComponent, selector: "ax-file-info" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$1.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPFileChooserDirective, selector: "[axpFileChooser]", inputs: ["context", "disabled", "items", "busy"], outputs: ["itemsChange", "busyChange"] }, { kind: "pipe", type: i1$5.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: AXPGalleryWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-gallery-widget-edit',
-                    template: ` <ax-media-viewer-container
-    style="height: 75vh;"
-    [thumbnail]="thumbnail()"
-    #c
-    [dataArray]="mediaViewerData()"
-  >
-    @if (header()) {
-      <ax-header>
-        @if (allowUpload()) {
-          <ax-prefix>
-            <ax-button
-              axpFileChooser
-              class="ax-sm"
-              color="primary"
-              [text]="'@general:actions.add-item.title' | translate | async"
-              [context]="chooserContext()"
-              [items]="files()"
-              [busy]="isChoosing()"
-              (itemsChange)="onChooserItemsChanged($event)"
-              (busyChange)="isChoosing.set($event)"
-            >
-              <ax-prefix>
-                <ax-icon icon="fa-light fa-plus"></ax-icon>
-              </ax-prefix>
-            </ax-button>
-          </ax-prefix>
-        }
-
-        @if (fileInfo()) {
-          <ax-file-info></ax-file-info>
-        }
-
-        <ax-suffix>
-          @if (downloadButton()) {
-            <ax-button
-              class="ax-sm"
-              look="blank"
-              (click)="download()"
-              [disabled]="mediaViewerData().length === 0"
-            >
-              <ax-icon icon="fa-light fa-download"></ax-icon>
-            </ax-button>
-          }
-          @if (fullScreenButton()) {
-            <ax-fullscreen-button> </ax-fullscreen-button>
-          }
-        </ax-suffix>
-      </ax-header>
-    }
-
-    <ax-prefix>
-      <ax-button
-        class="ax-sm"
-        (click)="c.next()"
-        [disabled]="c.getActiveIndex() === this.mediaViewerData().length - 1"
-      >
-        <ax-icon class="rtl:rotate-180 ax-icon ax-icon-chevron-right">
-        </ax-icon>
-      </ax-button>
-    </ax-prefix>
-
-    <ax-suffix>
-      <ax-button
-        class="ax-sm"
-        (click)="c.prev()"
-        [disabled]="c.getActiveIndex() === 0"
-      >
-        <ax-icon class="rtl:rotate-180 ax-icon ax-icon-chevron-left">
-        </ax-icon>
-      </ax-button>
-    </ax-suffix>
-  </ax-media-viewer-container>`,
-                    host: {
-                        class: 'block',
-                        '[style.height]': 'height()',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        AXMediaViewerModule,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXTranslationModule,
-                        AXPFileChooserDirective,
-                        AsyncPipe,
-                    ],
-                }]
-        }], propDecorators: { gallery: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }] } });
-
-var galleryWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetEditComponent: AXPGalleryWidgetEditComponent
-});
-
-class AXPGalleryWidgetViewComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.loadingDialog = inject(AXLoadingDialogService);
-        this.translationService = inject(AXTranslationService);
-        this.internalValue = computed(() => {
-            const parsedValue = this.getValue() ? JSON.parse(this.getValue()) : [];
-            return Array.isArray(parsedValue) ? parsedValue.map((c) => c) : [parsedValue];
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
-        this.multiple = computed(() => this.options()['multiple'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        this.height = computed(() => this.options()['height'] ?? 30, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        this.header = computed(() => this.options()['header'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.fullScreenButton = computed(() => this.options()['fullScreenButton'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fullScreenButton" }] : /* istanbul ignore next */ []));
-        this.downloadButton = computed(() => this.options()['downloadButton'] ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "downloadButton" }] : /* istanbul ignore next */ []));
-        this.thumbnails = computed(() => this.internalValue().filter((i) => i.id !== this.activeMedia()?.id), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "thumbnails" }] : /* istanbul ignore next */ []));
-        this.activeMedia = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeMedia" }] : /* istanbul ignore next */ []));
-    }
-    ngAfterViewInit() {
-        this.activeMedia.set(this.internalValue()[0]);
-    }
-    changeMediaSelected(media) {
-        this.activeMedia.set(media);
-    }
-    /** Downloads the currently active media file. */
-    async download() {
-        const media = this.activeMedia();
-        if (!media?.url) {
-            return;
-        }
-        const loadingDialogRef = this.loadingDialog.show({
-            title: await this.translationService.translateAsync('@general:actions.download.processing'),
-            mode: 'indeterminate',
-            progressColor: 'primary',
-            status: await this.translationService.translateAsync('@general:actions.download.processing'),
-        });
-        try {
-            const link = document.createElement('a');
-            link.href = media.url;
-            link.download = media.name ?? 'download';
-            link.target = '_blank';
-            link.rel = 'noopener noreferrer';
-            link.click();
-        }
-        finally {
-            loadingDialogRef.close();
-        }
-    }
-    getMediaInfo(mediaName) {
-        const extension = mediaName.split('.').pop()?.toLowerCase();
-        switch (extension) {
-            case 'jpg':
-            case 'jpeg':
-            case 'png':
-            case 'gif':
-            case 'bmp':
-            case 'webp':
-            case 'svg':
-                return { icon: '', format: 'image' };
-            case 'pdf':
-                return { icon: 'fa-regular fa-file-pdf', format: 'image' };
-            case 'mp4':
-            case 'webm':
-            case 'avi':
-            case 'mkv':
-            case 'mov':
-            case 'm4v':
-            case 'wmv':
-                return { icon: 'fa-regular fa-play', format: 'video' };
-            case 'mp3':
-            case 'wav':
-            case 'ogg':
-            case 'oga':
-            case 'm4a':
-            case 'flac':
-            case 'aac':
-            case 'wma':
-            case 'weba':
-                return { icon: 'fa-regular fa-volume-high', format: 'audio' };
-            default:
-                return { icon: '', format: 'image' };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGalleryWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPGalleryWidgetViewComponent, isStandalone: true, selector: "axp-gallery-widget-view", host: { properties: { "style.height": "height()" }, classAttribute: "block" }, usesInheritance: true, ngImport: i0, template: `
-    <div class="grid grid-cols-12 gap-2">
-      @if (internalValue().length) {
-        @if (header()) {
-          <div class="col-start-1 col-end-13 flex justify-end gap-2 mb-2">
-            @if (downloadButton()) {
-              <ax-button class="ax-sm" look="blank" (click)="download()">
-                <ax-icon icon="fa-light fa-download"></ax-icon>
-              </ax-button>
-            }
-            @if (fullScreenButton()) {
-              <ax-fullscreen-button></ax-fullscreen-button>
-            }
-          </div>
-        }
-        <div class="flex items-center justify-between rounded-lg col-start-1 col-end-13">
-          <div class="flex items-center md:justify-start justify-center w-full gap-3">
-            <div class="flex flex-col items-center gap-4">
-              @switch (getMediaInfo(activeMedia()?.name || '').format) {
-                @case ('video') {
-                  <video
-                    class="rounded-lg h-48 md:h-72 w-auto shadow-md"
-                    controls
-                    [src]="$safeNavigationMigration(activeMedia()?.url)"
-                  ></video>
-                }
-                @case ('image') {
-                  <ax-image class="rounded-lg h-48 md:h-72 w-auto" [src]="$safeNavigationMigration(activeMedia()?.url)">
-                    <ax-loading></ax-loading>
-                    <ax-placeholder>
-                      <div
-                        class="w-96 h-72 gap-4 flex flex-col items-center justify-center border rounded-lg"
-                      >
-                        <ax-icon class="fa-solid fa-circle-exclamation text-2xl"> </ax-icon>
-                        <span>Connection Error!</span>
-                      </div>
-                    </ax-placeholder>
-                  </ax-image>
-                }
-                @case ('audio') {
-                  <audio controls class="rounded-lg">
-                    <source [src]="$safeNavigationMigration(activeMedia()?.url)" type="audio/mp3" />
-                  </audio>
-                }
-              }
-              <div class="flex gap-4 overflow-x-auto max-w-[320px] lg:max-w-[480px] pb-2">
-                @for (media of thumbnails(); track $index) {
-                  @if (getMediaInfo(media.name); as mediaInfo) {
-                    <div
-                      class="hover:opacity-75 transition-all relative cursor-pointer flex justify-center items-center"
-                      (click)="changeMediaSelected(media)"
-                    >
-                      <ax-image
-                        class="w-16 brightness-50 h-16 rounded-lg shadow-md filter"
-                        [src]="mediaInfo.format == 'image' ? media.url : media.posterUrl"
-                      ></ax-image>
-                      <div class="absolute text-neutral-300 text-xl">
-                        <ax-icon [class]="mediaInfo.icon"> </ax-icon>
-                      </div>
-                    </div>
-                  }
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      } @else {
-        <!-- Empty State -->
-        <axp-state-message
-          icon="fa-light fa-images"
-          [title]="'@general:no-media.title'"
-          [description]="'@general:no-media.description'"
-        >
-        </axp-state-message>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$f.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$1.AXDecoratorFullScreenButtonComponent, selector: "ax-fullscreen-button", inputs: ["element", "isActive"], outputs: ["elementChange", "isActiveChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXMediaViewerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-gallery-widget-view',
-                    template: `
-    <div class="grid grid-cols-12 gap-2">
-      @if (internalValue().length) {
-        @if (header()) {
-          <div class="col-start-1 col-end-13 flex justify-end gap-2 mb-2">
-            @if (downloadButton()) {
-              <ax-button class="ax-sm" look="blank" (click)="download()">
-                <ax-icon icon="fa-light fa-download"></ax-icon>
-              </ax-button>
-            }
-            @if (fullScreenButton()) {
-              <ax-fullscreen-button></ax-fullscreen-button>
-            }
-          </div>
-        }
-        <div class="flex items-center justify-between rounded-lg col-start-1 col-end-13">
-          <div class="flex items-center md:justify-start justify-center w-full gap-3">
-            <div class="flex flex-col items-center gap-4">
-              @switch (getMediaInfo(activeMedia()?.name || '').format) {
-                @case ('video') {
-                  <video
-                    class="rounded-lg h-48 md:h-72 w-auto shadow-md"
-                    controls
-                    [src]="$safeNavigationMigration(activeMedia()?.url)"
-                  ></video>
-                }
-                @case ('image') {
-                  <ax-image class="rounded-lg h-48 md:h-72 w-auto" [src]="$safeNavigationMigration(activeMedia()?.url)">
-                    <ax-loading></ax-loading>
-                    <ax-placeholder>
-                      <div
-                        class="w-96 h-72 gap-4 flex flex-col items-center justify-center border rounded-lg"
-                      >
-                        <ax-icon class="fa-solid fa-circle-exclamation text-2xl"> </ax-icon>
-                        <span>Connection Error!</span>
-                      </div>
-                    </ax-placeholder>
-                  </ax-image>
-                }
-                @case ('audio') {
-                  <audio controls class="rounded-lg">
-                    <source [src]="$safeNavigationMigration(activeMedia()?.url)" type="audio/mp3" />
-                  </audio>
-                }
-              }
-              <div class="flex gap-4 overflow-x-auto max-w-[320px] lg:max-w-[480px] pb-2">
-                @for (media of thumbnails(); track $index) {
-                  @if (getMediaInfo(media.name); as mediaInfo) {
-                    <div
-                      class="hover:opacity-75 transition-all relative cursor-pointer flex justify-center items-center"
-                      (click)="changeMediaSelected(media)"
-                    >
-                      <ax-image
-                        class="w-16 brightness-50 h-16 rounded-lg shadow-md filter"
-                        [src]="mediaInfo.format == 'image' ? media.url : media.posterUrl"
-                      ></ax-image>
-                      <div class="absolute text-neutral-300 text-xl">
-                        <ax-icon [class]="mediaInfo.icon"> </ax-icon>
-                      </div>
-                    </div>
-                  }
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      } @else {
-        <!-- Empty State -->
-        <axp-state-message
-          icon="fa-light fa-images"
-          [title]="'@general:no-media.title'"
-          [description]="'@general:no-media.description'"
-        >
-        </axp-state-message>
-      }
-    </div>
-  `,
-                    host: {
-                        class: 'block',
-                        '[style.height]': 'height()',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        AXImageModule,
-                        AXDecoratorModule,
-                        AXLoadingModule,
-                        AXPStateMessageComponent,
-                        AXButtonModule,
-                        AXMediaViewerModule,
-                    ],
-                }]
-        }] });
-
-var galleryWidgetView_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetViewComponent: AXPGalleryWidgetViewComponent
-});
-
-const AXPGalleryWidget = {
-    name: 'gallery',
-    title: '@platform-layout-widgets:widgets.gallery.title',
-    description: '@platform-layout-widgets:widgets.gallery.description',
-    icon: 'fa-light fa-images',
-    categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
-    subCategory: AXP_WIDGETS_ADVANCE_SUB_MEDIA,
-    groups: [AXPWidgetGroupEnum.FormElement],
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        createBooleanProperty({
-            name: 'thumbnail',
-            title: 'Thumbnail',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-            path: 'options.thumbnail',
-        }),
-        createBooleanProperty({
-            name: 'header',
-            title: 'Header',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-            path: 'options.header',
-        }),
-        createBooleanProperty({
-            name: 'fileInfo',
-            title: 'File Info',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-            path: 'options.fileInfo',
-        }),
-        createBooleanProperty({
-            name: 'fullScreenButton',
-            title: 'Full Screen Button',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-            path: 'options.fullScreenButton',
-        }),
-    ],
-    type: 'editor',
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetView_component; }).then((c) => c.AXPGalleryWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetEdit_component; }).then((c) => c.AXPGalleryWidgetEditComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetEdit_component; }).then((c) => c.AXPGalleryWidgetEditComponent),
-        },
-    },
-};
-
-class AXPImageMarkerPopupComponent extends AXBasePageComponent {
-    ngOnInit() {
-        this.node = {
-            name: 'image-marker-popup-view',
-            type: 'image-marker',
-            options: this.options,
-            defaultValue: this.value,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageMarkerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPImageMarkerPopupComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <axp-widgets-container>
-      <ng-container axp-widget-renderer [node]="node" mode="view"></ng-container>
-    </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageMarkerPopupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [AXPWidgetCoreModule],
-                    template: `
-    <axp-widgets-container>
-      <ng-container axp-widget-renderer [node]="node" mode="view"></ng-container>
-    </axp-widgets-container>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class AXPImageMarkerWidgetColumnComponent extends AXPColumnWidgetComponent {
-    constructor() {
-        super();
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.rawImage = computed(() => this.options?.image, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rawImage" }] : /* istanbul ignore next */ []));
-        this.rawPoints = () => this.rawValue;
-        this.imageUrl = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const imageSource = this.rawImage();
-            const currentUrl = this.imageUrl();
-            if (currentUrl && currentUrl.startsWith('blob:')) {
-                URL.revokeObjectURL(currentUrl);
-            }
-            if (typeof imageSource === 'string') {
-                this.imageUrl.set(imageSource);
-            }
-            else if (imageSource instanceof URL) {
-                this.imageUrl.set(imageSource.href);
-            }
-            else if (imageSource instanceof Blob) {
-                this.imageUrl.set(URL.createObjectURL(imageSource));
-            }
-            else if (imageSource instanceof ArrayBuffer) {
-                const blob = new Blob([imageSource]);
-                this.imageUrl.set(URL.createObjectURL(blob));
-            }
-            else {
-                this.imageUrl.set(null);
-            }
-        });
-    }
-    async showPopup() {
-        const url = this.imageUrl();
-        if (!url) {
+    async showPopup() {
+        const url = this.imageUrl();
+        if (!url) {
             return;
         }
         const opts = this.options;
@@ -12939,7 +12381,7 @@ class AXPImageMarkerWidgetColumnComponent extends AXPColumnWidgetComponent {
         </ax-icon>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXPImageMarkerWidgetColumnComponent, decorators: [{
             type: Component,
@@ -13330,7 +12772,7 @@ const AXPImageMarkerWidget = {
 //#region ----- Imports -----
 //#endregion
 //#region ----- Constants -----
-const I18N = '@platform-layout-widgets:widgets.integration-connections-panel';
+const I18N$1 = '@platform-layout-widgets:widgets.integration-connections-panel';
 const ACTION_CLICK_GUARD_MS$1 = 300;
 const CONNECTION_UPDATE_COMMAND = 'IntegrationManagement.Connection:Update';
 const DISCONNECT_COMMAND = 'IntegrationManagement.Connection:Disconnect';
@@ -13481,7 +12923,7 @@ class AXPIntegrationConnectionActionsService {
     }
     async disconnect(provider, connection) {
         const connectionLabel = await this.resolveConnectionLabel(provider, connection);
-        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync(`${I18N}.dialogs.disconnect.title`), await this.translationService.translateAsync(`${I18N}.dialogs.disconnect.message`, {
+        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync(`${I18N$1}.dialogs.disconnect.title`), await this.translationService.translateAsync(`${I18N$1}.dialogs.disconnect.message`, {
             params: { provider: connectionLabel },
         }), 'danger', 'horizontal', false, 'cancel');
         if (confirmed.result !== true) {
@@ -13494,7 +12936,7 @@ class AXPIntegrationConnectionActionsService {
     }
     async remove(provider, connection) {
         const connectionLabel = await this.resolveConnectionLabel(provider, connection);
-        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync(`${I18N}.dialogs.remove.title`), await this.translationService.translateAsync(`${I18N}.dialogs.remove.message`, {
+        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync(`${I18N$1}.dialogs.remove.title`), await this.translationService.translateAsync(`${I18N$1}.dialogs.remove.message`, {
             params: { provider: connectionLabel },
         }), 'danger', 'horizontal', false, 'cancel');
         if (confirmed.result !== true) {
@@ -13973,7 +13415,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$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], 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", "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$5.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                <!--------------------------------------------------------------->\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$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], 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", "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$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, decorators: [{
             type: Component,
@@ -14028,7 +13470,7 @@ class AXPJsonViewerWidgetViewComponent extends AXPValueWidgetComponent {
     <div class="w-full">
       <ax-json-viewer [json]="jsonValue()"></ax-json-viewer>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i1$g.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i1$e.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPJsonViewerWidgetViewComponent, decorators: [{
             type: Component,
@@ -14085,7 +13527,7 @@ class AXPJsonViewerWidgetEditComponent extends AXPValueWidgetComponent {
     <div class="w-full">
       <ax-json-viewer [json]="jsonValue()"></ax-json-viewer>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i1$g.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXJsonViewerModule }, { kind: "component", type: i1$e.JsonViewerComponent, selector: "ax-json-viewer", inputs: ["json"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPJsonViewerWidgetEditComponent, decorators: [{
             type: Component,
@@ -14321,7 +13763,7 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
       [readonly]="readonly()"
     >
     </ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$h.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$f.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMapWidgetEditComponent, decorators: [{
             type: Component,
@@ -14417,7 +13859,7 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
       [disabled]="disabled()"
       [readonly]="readonly()"
     ></ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$h.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$f.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "maxPolyline", "maxRectangle", "maxCircle", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "polylines", "rectangles", "circles", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onPolylineAdded", "onPolylineClick", "onPolylineChanged", "onRectangleAdded", "onRectangleClick", "onRectangleChanged", "onCircleAdded", "onCircleClick", "onCircleChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMapWidgetViewComponent, decorators: [{
             type: Component,
@@ -14647,7 +14089,7 @@ class AXPQrcodeWidgetColumnComponent extends AXPColumnWidgetComponent {
         <span>-</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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,
@@ -14768,7 +14210,7 @@ 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$7.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$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1$5.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: 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$7.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$1.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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1$5.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,
@@ -14877,7 +14319,7 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.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,
@@ -15277,7 +14719,7 @@ class AXPSignatureWidgetColumnComponent extends AXPColumnWidgetComponent {
         <span>-</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXPSignatureWidgetColumnComponent, decorators: [{
             type: Component,
@@ -15453,7 +14895,7 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSignatureWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image\n        [src]=\"getValue()!\"\n        class=\"block w-full min-h-[9rem] object-contain\"\n      />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-5 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXPaintModule }, { kind: "component", type: i2$8.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$8.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$f.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.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: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image\n        [src]=\"getValue()!\"\n        class=\"block w-full min-h-[9rem] object-contain\"\n      />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-5 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXPaintModule }, { kind: "component", type: i2$8.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$8.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.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: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -15490,7 +14932,7 @@ class AXPSignatureWidgetViewComponent extends AXPValueWidgetComponent {
         <span>{{ placeholder() }}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$f.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSignatureWidgetViewComponent, decorators: [{
             type: Component,
@@ -17807,7 +17249,7 @@ class AXPAdvancedGridWidgetDesignerComponent extends AXPLayoutBaseWidgetComponen
         justify-items-end justify-items-stretch grid-flow-row grid-flow-col
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$i.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$g.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -18063,7 +17505,7 @@ class AXPAdvancedGridWidgetViewComponent extends AXPValueWidgetComponent {
         justify-items-end justify-items-stretch
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$i.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i1$i.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$g.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i1$g.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridWidgetViewComponent, decorators: [{
             type: Component,
@@ -18215,7 +17657,7 @@ class AXPAdvancedGridItemWidgetDesignerComponent extends AXPLayoutBaseWidgetComp
         ><axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       </ax-grid-layout-widget>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$i.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$g.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridItemWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -19213,7 +18655,7 @@ class AXPRepeaterWidgetDesignerComponent extends AXPValueWidgetComponent {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "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: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -19792,7 +19234,7 @@ class AXPStepWizardWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host ax-step-wizard-item>ax-content{display:none!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXStepWizardModule }, { kind: "component", type: i1$j.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "size", "look", "changeStep", "orientation", "content"], outputs: ["stepChanged"] }, { kind: "component", type: i1$j.AXStepWizardItemComponent, selector: "ax-step-wizard-item", inputs: ["disabled", "color", "step", "label", "description", "customTemplate", "active", "passed", "look", "state", "id"], outputs: ["activeChange", "passedChange", "lookChange", "stateChange"] }, { kind: "directive", type: i1$j.AXStepWizardContentDirective, selector: "[axStepWizardContent]", inputs: ["axStepWizardContent"], exportAs: ["axStepWizardContent"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [":host ax-step-wizard-item>ax-content{display:none!important}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXStepWizardModule }, { kind: "component", type: i1$h.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "size", "look", "changeStep", "orientation", "content"], outputs: ["stepChanged"] }, { kind: "component", type: i1$h.AXStepWizardItemComponent, selector: "ax-step-wizard-item", inputs: ["disabled", "color", "step", "label", "description", "customTemplate", "active", "passed", "look", "state", "id"], outputs: ["activeChange", "passedChange", "lookChange", "stateChange"] }, { kind: "directive", type: i1$h.AXStepWizardContentDirective, selector: "[axStepWizardContent]", inputs: ["axStepWizardContent"], exportAs: ["axStepWizardContent"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$5.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: AXPStepWizardWidgetViewComponent, decorators: [{
             type: Component,
@@ -21677,7 +21119,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=\"Reset\"\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> Direction </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>Grid</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\">Column</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>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') {\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=\"Choose...\"\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=\"Choose...\"\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$k.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$k.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", "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$8.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$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], 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=\"Reset\"\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> Direction </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>Grid</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\">Column</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>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') {\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=\"Choose...\"\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=\"Choose...\"\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$8.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$1.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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"] }], 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,
@@ -21857,7 +21299,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$8.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", "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$8.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -22302,7 +21744,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n  <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n    <span class=\"text-sm font-light\">Radius</span>\n    <div class=\"flex gap-1 items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\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=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\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=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if (currentActiveRadiusSide() === 'all') {\n        <div class=\"flex justify-center items-center flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"flex justify-start items-center\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [maxValue]=\"100\"\n            [value]=\"allRadius()\"\n            [changeOnScroll]=\"true\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('all')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('all') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'all')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      } @else {\n        <div class=\"w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-left']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'top-left')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('top-left')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-right']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'top-right')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('top-right')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path\n            d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-left']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'bottom-left')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('bottom-left')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-right']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'bottom-right')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('bottom-right')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex justify-between items-center py-1\">\n    <span class=\"text-sm font-light\">Borders</span>\n  </div>\n\n  <div class=\"border-box flex justify-between items-center gap-4\">\n    <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"border-box-top col-start-2 row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3H14V2H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"border-box-right col-start-3 row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2L13 14L14 14L14 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"border-box-bottom col-start-2 row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13H14V14H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"border-box-left col-start-1 row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2L3 14L2 14L2 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"border-box-all col-start-2 row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\"\n    >\n      <div class=\"text-sm font-light\">Style</div>\n      <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\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            >\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div\n        class=\"contents\"\n        [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\"\n      >\n        <div class=\"text-sm font-light\">Width</div>\n        <div class=\"flex justify-start items-center max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'width', currentActiveSide())\n            \"\n            class=\"ax-sm exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getWidthUnitLabel(currentActiveSide())\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of widthUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n                      (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n\n        <div class=\"text-sm font-light\">Color</div>\n        <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? '', 'color', currentActiveSide())\n            \"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$8.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 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: 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: AXButtonGroupModule }, { kind: "component", type: i1$k.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$k.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n  <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n    <span class=\"text-sm font-light\">Radius</span>\n    <div class=\"flex gap-1 items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\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=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\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=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if (currentActiveRadiusSide() === 'all') {\n        <div class=\"flex justify-center items-center flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"flex justify-start items-center\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [maxValue]=\"100\"\n            [value]=\"allRadius()\"\n            [changeOnScroll]=\"true\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('all')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('all') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'all')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      } @else {\n        <div class=\"w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-left']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'top-left')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('top-left')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-right']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'top-right')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('top-right')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path\n            d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-left']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'bottom-left')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('bottom-left')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\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          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path\n            d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-right']\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'radius', 'bottom-right')\n            \"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getRadiusUnitLabel('bottom-right')\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex justify-between items-center py-1\">\n    <span class=\"text-sm font-light\">Borders</span>\n  </div>\n\n  <div class=\"border-box flex justify-between items-center gap-4\">\n    <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"border-box-top col-start-2 row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3H14V2H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"border-box-right col-start-3 row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2L13 14L14 14L14 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"border-box-bottom col-start-2 row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13H14V14H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"border-box-left col-start-1 row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2L3 14L2 14L2 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"border-box-all col-start-2 row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\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              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\"\n    >\n      <div class=\"text-sm font-light\">Style</div>\n      <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\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            >\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\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            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div\n        class=\"contents\"\n        [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\"\n      >\n        <div class=\"text-sm font-light\">Width</div>\n        <div class=\"flex justify-start items-center max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? 0, 'width', currentActiveSide())\n            \"\n            class=\"ax-sm exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button\n                [text]=\"getWidthUnitLabel(currentActiveSide())\"\n                [look]=\"'blank'\"\n                [mode]=\"'dropdown'\"\n              >\n                <ax-button-item-list>\n                  @for (u of widthUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n                      (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n\n        <div class=\"text-sm font-light\">Color</div>\n        <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"\n              setBorder($event.value ?? '', 'color', currentActiveSide())\n            \"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$8.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 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: 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: 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: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -22803,7 +22245,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  <!-- ----- Simple list (text rows) ----- -->\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') {\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.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", "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", "size", "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$7.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", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$5.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  <!-- ----- Simple list (text rows) ----- -->\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') {\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.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: 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$7.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", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -22850,7 +22292,7 @@ class AXPDirectionWidgetEditComponent extends AXPValueWidgetComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDirectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2\">\n  <div class=\"mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (onValueChanged)=\"handleValueChanged($event)\"\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          <i [class]=\"item.icon\"></i>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: ["axp-direction-widget-editor ax-selection-list>ul{flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2\">\n  <div class=\"mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (onValueChanged)=\"handleValueChanged($event)\"\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          <i [class]=\"item.icon\"></i>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: ["axp-direction-widget-editor ax-selection-list>ul{flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDirectionWidgetEditComponent, decorators: [{
             type: Component,
@@ -23300,7 +22742,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>Direction</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> Wrap </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>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 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=\"Choose...\"\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=\"Choose...\"\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$k.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$k.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", "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$8.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", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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>Direction</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> Wrap </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>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 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=\"Choose...\"\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=\"Choose...\"\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$8.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -24720,79 +24162,631 @@ const AXPRegularExpressionValidationWidget = {
 
 class AXPRequiredValidationWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
-        super(...arguments);
-        this.validationName = this.token.node.name;
-        this.validationInformation = AXP_BASE_VALIDATION_INFORMATION[this.validationName];
-        this.validationStatus = linkedSignal(() => this.getValue()?.rule === this.validationInformation.rule ? true : false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "validationStatus" }] : /* istanbul ignore next */ []));
-        this.validationText = linkedSignal(() => this.getValue()?.message ?? this.validationInformation.message, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "validationText" }] : /* istanbul ignore next */ []));
-        this.validationPlaceholder = this.validationInformation.placeholder;
-        this.#syncChange = effect(() => {
-            if (this.validationStatus()) {
-                this.setValue({ rule: this.validationInformation.rule, message: this.validationText() });
+        super(...arguments);
+        this.validationName = this.token.node.name;
+        this.validationInformation = AXP_BASE_VALIDATION_INFORMATION[this.validationName];
+        this.validationStatus = linkedSignal(() => this.getValue()?.rule === this.validationInformation.rule ? true : false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validationStatus" }] : /* istanbul ignore next */ []));
+        this.validationText = linkedSignal(() => this.getValue()?.message ?? this.validationInformation.message, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validationText" }] : /* istanbul ignore next */ []));
+        this.validationPlaceholder = this.validationInformation.placeholder;
+        this.#syncChange = effect(() => {
+            if (this.validationStatus()) {
+                this.setValue({ rule: this.validationInformation.rule, message: this.validationText() });
+            }
+            else
+                this.setValue(undefined);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#syncChange" }] : /* istanbul ignore next */ []));
+    }
+    ToggleRule(event) {
+        this.validationStatus.set(event);
+    }
+    #syncChange;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRequiredValidationWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPRequiredValidationWidgetEditComponent, isStandalone: true, selector: "axp-required-validation-widget-editor", usesInheritance: true, ngImport: i0, template: `<axp-base-validation-component
+    [validationStatus]="validationStatus()"
+    (validationStatusChange)="ToggleRule($event)"
+    [(validationText)]="validationText"
+    [validationTextPlaceholder]="validationPlaceholder"
+  >
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRequiredValidationWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-required-validation-widget-editor',
+                    template: `<axp-base-validation-component
+    [validationStatus]="validationStatus()"
+    (validationStatusChange)="ToggleRule($event)"
+    [(validationText)]="validationText"
+    [validationTextPlaceholder]="validationPlaceholder"
+  >
+  </axp-base-validation-component>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXPWidgetCoreModule, AXPBaseValidationComponent, FormsModule],
+                }]
+        }] });
+
+var requiredValidationWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPRequiredValidationWidgetEditComponent: AXPRequiredValidationWidgetEditComponent
+});
+
+const AXPRequiredValidationWidget = {
+    name: 'required-validation',
+    title: 'Mandatory Field Validation',
+    type: 'validation',
+    icon: 'fa-light fa-exclamation-circle',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return requiredValidationWidgetEdit_component; }).then((c) => c.AXPRequiredValidationWidgetEditComponent),
+        },
+    },
+};
+
+//#region ----- Constants -----
+const UNIX_FIELD_PATTERN = /^(?:\*|\d+(?:-\d+)?(?:\/\d+)?|\*\/\d+)(?:,(?:\*|\d+(?:-\d+)?(?:\/\d+)?|\*\/\d+))*$/;
+const ALL_WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+const AXP_CRON_DEFAULT_MODEL = {
+    preset: 'daily',
+    minute: 0,
+    hour: 0,
+    hourInterval: 1,
+    weekdays: [1],
+    monthDay: 1,
+    raw: '0 0 * * *',
+};
+//#endregion
+//#region ----- Validation -----
+function normalizeCronExpression(value) {
+    return typeof value === 'string' ? value.trim() : '';
+}
+function isValidUnixCron(value) {
+    const raw = normalizeCronExpression(value);
+    if (!raw) {
+        return false;
+    }
+    const fields = raw.split(/\s+/);
+    if (fields.length !== 5 && fields.length !== 6) {
+        return false;
+    }
+    return fields.every((field) => UNIX_FIELD_PATTERN.test(field));
+}
+//#endregion
+//#region ----- Parse / build -----
+function parseCronExpression(value) {
+    const raw = normalizeCronExpression(value);
+    if (!raw || !isValidUnixCron(raw)) {
+        return { ...AXP_CRON_DEFAULT_MODEL, preset: raw ? 'custom' : 'daily', raw };
+    }
+    const fiveField = toFiveFieldCron(raw);
+    const [minuteField, hourField, dayOfMonthField, monthField, dayOfWeekField] = fiveField.split(' ');
+    const minute = parseExactNumber(minuteField, 0, 59);
+    const monthDay = parseExactNumber(dayOfMonthField, 1, 31);
+    const hour = parseExactNumber(hourField, 0, 23);
+    const hourInterval = parseStarStep(hourField);
+    const weekdays = parseWeekdays(dayOfWeekField);
+    const base = {
+        ...AXP_CRON_DEFAULT_MODEL,
+        minute: minute ?? AXP_CRON_DEFAULT_MODEL.minute,
+        hour: hour ?? AXP_CRON_DEFAULT_MODEL.hour,
+        hourInterval: hourInterval ?? AXP_CRON_DEFAULT_MODEL.hourInterval,
+        weekdays: weekdays ?? AXP_CRON_DEFAULT_MODEL.weekdays,
+        monthDay: monthDay ?? AXP_CRON_DEFAULT_MODEL.monthDay,
+        raw: fiveField,
+    };
+    if (monthField !== '*') {
+        return { ...base, preset: 'custom', raw };
+    }
+    if (minute == null) {
+        return { ...base, preset: 'custom', raw };
+    }
+    if (dayOfMonthField === '*' && dayOfWeekField === '*' && hourInterval != null) {
+        return { ...base, preset: 'hourly', hour: 0 };
+    }
+    if (hour != null && dayOfMonthField === '*' && dayOfWeekField === '*') {
+        return { ...base, preset: 'daily' };
+    }
+    if (hour != null && dayOfMonthField === '*' && weekdays != null) {
+        if (weekdays.length === ALL_WEEKDAYS.length) {
+            return { ...base, preset: 'daily' };
+        }
+        return { ...base, preset: 'weekly', weekdays };
+    }
+    if (hour != null && monthDay != null && dayOfWeekField === '*') {
+        return { ...base, preset: 'monthly' };
+    }
+    return { ...base, preset: 'custom', raw };
+}
+function buildCronExpression(model) {
+    const minute = clampInt(model.minute, 0, 59);
+    const hour = clampInt(model.hour, 0, 23);
+    const hourInterval = clampInt(model.hourInterval, 1, 23);
+    const monthDay = clampInt(model.monthDay, 1, 31);
+    const weekdays = normalizeWeekdays(model.weekdays);
+    switch (model.preset) {
+        case 'hourly':
+            return `${minute} ${hourInterval === 1 ? '*' : `*/${hourInterval}`} * * *`;
+        case 'daily':
+            return `${minute} ${hour} * * *`;
+        case 'weekly':
+            return `${minute} ${hour} * * ${formatWeekdays(weekdays.length ? weekdays : [1])}`;
+        case 'monthly':
+            return `${minute} ${hour} ${monthDay} * *`;
+        case 'custom':
+            return normalizeCronExpression(model.raw);
+        default:
+            return AXP_CRON_DEFAULT_MODEL.raw;
+    }
+}
+function describeCronExpression(value) {
+    const raw = normalizeCronExpression(value);
+    if (!raw) {
+        return { kind: 'empty' };
+    }
+    if (!isValidUnixCron(raw)) {
+        return { kind: 'invalid', raw };
+    }
+    const model = parseCronExpression(raw);
+    switch (model.preset) {
+        case 'hourly':
+            return { kind: 'hourly', interval: model.hourInterval, minute: model.minute };
+        case 'daily':
+            return { kind: 'daily', hour: model.hour, minute: model.minute };
+        case 'weekly':
+            return { kind: 'weekly', hour: model.hour, minute: model.minute, weekdays: model.weekdays };
+        case 'monthly':
+            return { kind: 'monthly', hour: model.hour, minute: model.minute, monthDay: model.monthDay };
+        default:
+            return { kind: 'custom', raw: toFiveFieldCron(raw) };
+    }
+}
+function applyCronPreset(model, preset) {
+    const next = { ...model, preset };
+    return { ...next, raw: buildCronExpression(next) };
+}
+//#endregion
+//#region ----- Field helpers -----
+function toFiveFieldCron(raw) {
+    const fields = raw.split(/\s+/);
+    return fields.length === 6 ? fields.slice(1).join(' ') : fields.join(' ');
+}
+function parseExactNumber(field, min, max) {
+    if (!/^\d+$/.test(field)) {
+        return null;
+    }
+    const value = Number(field);
+    if (!Number.isInteger(value) || value < min || value > max) {
+        return null;
+    }
+    return value;
+}
+function parseStarStep(field) {
+    if (field === '*') {
+        return 1;
+    }
+    const match = /^\*\/(\d+)$/.exec(field);
+    if (!match) {
+        return null;
+    }
+    const interval = Number(match[1]);
+    if (!Number.isInteger(interval) || interval < 1 || interval > 23) {
+        return null;
+    }
+    return interval;
+}
+function parseWeekdays(field) {
+    if (field === '*') {
+        return null;
+    }
+    const values = new Set();
+    for (const part of field.split(',')) {
+        if (part.includes('/')) {
+            return null;
+        }
+        if (part.includes('-')) {
+            const [fromRaw, toRaw] = part.split('-');
+            const from = normalizeWeekday(Number(fromRaw));
+            const to = normalizeWeekday(Number(toRaw));
+            if (from == null || to == null || from > to) {
+                return null;
+            }
+            for (let day = from; day <= to; day += 1) {
+                values.add(day);
+            }
+            continue;
+        }
+        const day = normalizeWeekday(Number(part));
+        if (day == null) {
+            return null;
+        }
+        values.add(day);
+    }
+    return values.size ? [...values].sort((left, right) => left - right) : null;
+}
+function normalizeWeekday(value) {
+    if (!Number.isInteger(value) || value < 0 || value > 7) {
+        return null;
+    }
+    return value === 7 ? 0 : value;
+}
+function normalizeWeekdays(weekdays) {
+    const values = new Set();
+    for (const weekday of weekdays) {
+        const day = normalizeWeekday(weekday);
+        if (day != null) {
+            values.add(day);
+        }
+    }
+    return [...values].sort((left, right) => left - right);
+}
+function formatWeekdays(weekdays) {
+    const days = normalizeWeekdays(weekdays);
+    if (days.length === 0) {
+        return '1';
+    }
+    const isContiguous = days.every((day, index) => index === 0 || day === days[index - 1] + 1);
+    if (isContiguous && days.length > 2) {
+        return `${days[0]}-${days[days.length - 1]}`;
+    }
+    return days.join(',');
+}
+function resolveLocaleWeekStartsOn(startsOn) {
+    const start = Number(startsOn);
+    return Number.isInteger(start) && start >= 0 && start <= 6 ? start : 0;
+}
+function orderWeekdaysFromStart(startsOn) {
+    const origin = resolveLocaleWeekStartsOn(startsOn);
+    return ALL_WEEKDAYS.map((_, offset) => (origin + offset) % 7);
+}
+function clampInt(value, min, max) {
+    if (!Number.isFinite(value)) {
+        return min;
+    }
+    return Math.min(max, Math.max(min, Math.trunc(value)));
+}
+//#endregion
+
+//#region ----- Constants -----
+const I18N_PREFIX = '@platform-layout-widgets:widgets.cron-job';
+const WEEKDAYS = [1, 2, 3, 4, 5];
+const WEEKEND = [0, 6];
+//#endregion
+//#region ----- Service -----
+class AXPCronExpressionDisplayService {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.translation = inject(AXTranslationService);
+        this.formatService = inject(AXFormatService);
+        this.settingsService = inject(AXPSettingsService);
+        this.localeService = inject(AXLocaleService);
+    }
+    //#endregion
+    //#region ----- Public API -----
+    async describe(value) {
+        const model = describeCronExpression(value);
+        switch (model.kind) {
+            case 'empty':
+                return (await this.translation.translateAsync(`${I18N_PREFIX}.summary.empty`)) ?? '';
+            case 'invalid':
+                return (await this.translation.translateAsync(`${I18N_PREFIX}.summary.invalid`)) ?? model.raw;
+            case 'hourly':
+                return this.describeHourly(model.interval, model.minute);
+            case 'daily':
+                return this.translate(`${I18N_PREFIX}.summary.daily`, {
+                    time: await this.formatTime(model.hour, model.minute),
+                });
+            case 'weekly':
+                return this.describeWeekly(model.weekdays, model.hour, model.minute);
+            case 'monthly':
+                return this.translate(`${I18N_PREFIX}.summary.monthly`, {
+                    day: String(model.monthDay),
+                    time: await this.formatTime(model.hour, model.minute),
+                });
+            case 'custom':
+                return model.raw;
+            default:
+                return '';
+        }
+    }
+    //#endregion
+    //#region ----- Private helpers -----
+    async describeHourly(interval, minute) {
+        if (interval === 1 && minute === 0) {
+            return this.translate(`${I18N_PREFIX}.summary.every-hour`);
+        }
+        if (interval === 1) {
+            return this.translate(`${I18N_PREFIX}.summary.every-hour-at-minute`, { minute: String(minute) });
+        }
+        if (minute === 0) {
+            return this.translate(`${I18N_PREFIX}.summary.every-n-hours`, { n: String(interval) });
+        }
+        return this.translate(`${I18N_PREFIX}.summary.every-n-hours-at-minute`, {
+            n: String(interval),
+            minute: String(minute),
+        });
+    }
+    async describeWeekly(weekdays, hour, minute) {
+        const time = await this.formatTime(hour, minute);
+        if (sameDays(weekdays, WEEKDAYS)) {
+            return this.translate(`${I18N_PREFIX}.summary.weekdays`, { time });
+        }
+        if (sameDays(weekdays, WEEKEND)) {
+            return this.translate(`${I18N_PREFIX}.summary.weekend`, { time });
+        }
+        const selected = new Set(weekdays);
+        const dayNames = await Promise.all(orderWeekdaysFromStart(this.localeService.activeProfile()?.calendar?.week?.startsOn)
+            .filter((day) => selected.has(day))
+            .map((day) => this.translate(`${I18N_PREFIX}.weekdays.${day}`)));
+        return this.translate(`${I18N_PREFIX}.summary.weekly`, {
+            days: dayNames.filter(Boolean).join(', '),
+            time,
+        });
+    }
+    async formatTime(hour, minute) {
+        const format = await this.settingsService.get(AXPRegionalSetting.ShortTime);
+        return this.formatService.format(new Date(2000, 0, 1, hour, minute, 0), 'time', { format });
+    }
+    async translate(key, params) {
+        return (await this.translation.translateAsync(key, params ? { params } : undefined)) ?? '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionDisplayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionDisplayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//#endregion
+function sameDays(left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every((day, index) => day === right[index]);
+}
+
+//#region ----- Types -----
+const AXP_CRON_UI_PRESETS = ['hourly', 'daily', 'weekly', 'monthly'];
+const AXP_CRON_PRESETS = [...AXP_CRON_UI_PRESETS, 'custom'];
+//#endregion
+
+//#endregion
+//#region ----- Constants -----
+const I18N = '@platform-layout-widgets:widgets.cron-job';
+const HOUR_ITEMS = Array.from({ length: 24 }, (_, hour) => ({
+    id: String(hour),
+    text: String(hour).padStart(2, '0'),
+    value: String(hour),
+}));
+const MINUTE_ITEMS = Array.from({ length: 60 }, (_, minute) => ({
+    id: String(minute),
+    text: String(minute).padStart(2, '0'),
+    value: String(minute),
+}));
+const MONTH_DAY_ITEMS = Array.from({ length: 31 }, (_, index) => {
+    const day = String(index + 1);
+    return { id: day, text: day, value: day };
+});
+//#endregion
+//#region ----- Component -----
+class AXPCronExpressionEditorComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.translation = inject(AXTranslationService);
+        this.display = inject(AXPCronExpressionDisplayService);
+        this.localeService = inject(AXLocaleService);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ----- Inputs & Outputs -----
+        this.value = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.valueChange = output();
+        //#endregion
+        //#region ----- State Signals -----
+        this.i18n = I18N;
+        this.hourItems = HOUR_ITEMS;
+        this.minuteItems = MINUTE_ITEMS;
+        this.monthDayItems = MONTH_DAY_ITEMS;
+        this.model = signal({ ...AXP_CRON_DEFAULT_MODEL }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.summary = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        this.presetItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presetItems" }] : /* istanbul ignore next */ []));
+        this.weekdayItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdayItems" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.preset = computed(() => this.model().preset, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+        this.#syncFromValue = effect(() => {
+            const incoming = normalizeCronExpression(this.value());
+            const current = untracked(() => this.model().raw);
+            if (incoming === current) {
+                return;
             }
-            else
-                this.setValue(undefined);
+            untracked(() => {
+                this.model.set(incoming ? parseCronExpression(incoming) : { ...AXP_CRON_DEFAULT_MODEL, raw: '' });
+                void this.refreshSummary();
+            });
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#syncChange" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "#syncFromValue" }] : /* istanbul ignore next */ []));
+        void this.loadLabels();
+        merge(this.translation.langChanges$, this.localeService.profileChanged$)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            void this.loadLabels();
+            void this.refreshSummary();
+        });
     }
-    ToggleRule(event) {
-        this.validationStatus.set(event);
+    #syncFromValue;
+    //#endregion
+    //#region ----- Event Handlers -----
+    onPresetChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        const preset = event.value;
+        if (!preset || preset === this.model().preset) {
+            return;
+        }
+        this.commit(applyCronPreset(this.model(), preset));
     }
-    #syncChange;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRequiredValidationWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPRequiredValidationWidgetEditComponent, isStandalone: true, selector: "axp-required-validation-widget-editor", usesInheritance: true, ngImport: i0, template: `<axp-base-validation-component
-    [validationStatus]="validationStatus()"
-    (validationStatusChange)="ToggleRule($event)"
-    [(validationText)]="validationText"
-    [validationTextPlaceholder]="validationPlaceholder"
-  >
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onHourChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.patch({ hour: coerceSelectNumber(event.value, this.model().hour) });
+    }
+    onMinuteChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.patch({ minute: coerceSelectNumber(event.value, this.model().minute) });
+    }
+    onHourIntervalChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        const interval = Number(event.value);
+        this.patch({ hourInterval: Number.isFinite(interval) ? interval : 1 });
+    }
+    onMonthDayChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.patch({ monthDay: coerceSelectNumber(event.value, this.model().monthDay) });
+    }
+    onWeekdaysChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        const selected = normalizeWeekdaySelection(event.value);
+        this.patch({ weekdays: selected.length ? selected : this.model().weekdays });
+    }
+    //#endregion
+    //#region ----- Private helpers -----
+    patch(partial) {
+        const next = { ...this.model(), ...partial };
+        this.commit({ ...next, raw: buildCronExpression(next) });
+    }
+    commit(next) {
+        this.model.set(next);
+        this.valueChange.emit(next.raw);
+        void this.refreshSummary();
+    }
+    async refreshSummary() {
+        this.summary.set(await this.display.describe(this.model().raw));
+    }
+    async loadLabels() {
+        const presets = await Promise.all(AXP_CRON_UI_PRESETS.map(async (id) => ({
+            id,
+            text: (await this.translation.translateAsync(`${I18N}.presets.${id}`)) ?? id,
+        })));
+        const weekdays = await Promise.all(orderWeekdaysFromStart(this.localeService.activeProfile()?.calendar?.week?.startsOn).map(async (id) => ({
+            id,
+            text: (await this.translation.translateAsync(`${I18N}.weekdays-short.${id}`)) ?? String(id),
+        })));
+        this.presetItems.set(presets);
+        this.weekdayItems.set(weekdays);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCronExpressionEditorComponent, isStandalone: true, selector: "axp-cron-expression-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <!-- ----- Recurrence presets ----- -->\n  <ax-selection-list\n    [items]=\"presetItems()\"\n    [ngModel]=\"preset()\"\n    (onValueChanged)=\"onPresetChange($event)\"\n    direction=\"horizontal\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    valueField=\"id\"\n    textField=\"text\"\n    [disabled]=\"disabled()\"\n  ></ax-selection-list>\n\n  @if (preset() === 'hourly') {\n    <!-- ----- Hourly interval and minute ----- -->\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1 w-28\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.every' | translate | async }}</ax-label>\n        <ax-number-box\n          [ngModel]=\"model().hourInterval\"\n          (onValueChanged)=\"onHourIntervalChange($event)\"\n          [minValue]=\"1\"\n          [maxValue]=\"23\"\n          [disabled]=\"disabled()\"\n          [showSpinButtons]=\"true\"\n        ></ax-number-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.hours' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.at-minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n  <!-- ----- Daily time ----- -->\n  @else if (preset() === 'daily') {\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"hourItems\"\n          [value]=\"'' + model().hour\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onHourChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n  <!-- ----- Weekly days and time ----- -->\n  @else if (preset() === 'weekly') {\n    <div class=\"flex flex-col gap-3\">\n      <ax-selection-list\n        [items]=\"weekdayItems()\"\n        [ngModel]=\"model().weekdays\"\n        (onValueChanged)=\"onWeekdaysChange($event)\"\n        direction=\"horizontal\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        valueField=\"id\"\n        textField=\"text\"\n        [disabled]=\"disabled()\"\n      ></ax-selection-list>\n      <div class=\"flex flex-wrap items-end gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n          <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n        </div>\n        <div class=\"flex flex-col gap-1 w-24\">\n          <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n          <ax-combo-box\n            [items]=\"hourItems\"\n            [value]=\"'' + model().hour\"\n            [searchable]=\"false\"\n            [disabled]=\"disabled()\"\n            (onValueChanged)=\"onHourChange($event)\"\n          ></ax-combo-box>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n          <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n        </div>\n        <div class=\"flex flex-col gap-1 w-24\">\n          <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n          <ax-combo-box\n            [items]=\"minuteItems\"\n            [value]=\"'' + model().minute\"\n            [searchable]=\"false\"\n            [disabled]=\"disabled()\"\n            (onValueChanged)=\"onMinuteChange($event)\"\n          ></ax-combo-box>\n        </div>\n      </div>\n    </div>\n  }\n  <!-- ----- Monthly day and time ----- -->\n  @else if (preset() === 'monthly') {\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.on-day' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.day-of-month' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"monthDayItems\"\n          [value]=\"'' + model().monthDay\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMonthDayChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"hourItems\"\n          [value]=\"'' + model().hour\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onHourChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n\n  @if (summary()) {\n    <!-- ----- Human-readable schedule summary ----- -->\n    <ax-badge size=\"sm\" look=\"twotone\" color=\"primary\" [text]=\"summary()\"></ax-badge>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$8.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: 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: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRequiredValidationWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionEditorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-required-validation-widget-editor',
-                    template: `<axp-base-validation-component
-    [validationStatus]="validationStatus()"
-    (validationStatusChange)="ToggleRule($event)"
-    [(validationText)]="validationText"
-    [validationTextPlaceholder]="validationPlaceholder"
-  >
-  </axp-base-validation-component>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPWidgetCoreModule, AXPBaseValidationComponent, FormsModule],
-                }]
-        }] });
-
-var requiredValidationWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPRequiredValidationWidgetEditComponent: AXPRequiredValidationWidgetEditComponent
-});
-
-const AXPRequiredValidationWidget = {
-    name: 'required-validation',
-    title: 'Mandatory Field Validation',
-    type: 'validation',
-    icon: 'fa-light fa-exclamation-circle',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return requiredValidationWidgetEdit_component; }).then((c) => c.AXPRequiredValidationWidgetEditComponent),
-        },
-    },
-};
+            args: [{ selector: 'axp-cron-expression-editor', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block w-full' }, imports: [
+                        AsyncPipe,
+                        AXBadgeModule,
+                        AXComboBoxComponent,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXNumberBoxModule,
+                        AXSelectionListModule,
+                        AXTranslationModule,
+                        FormsModule,
+                    ], template: "<div class=\"flex flex-col gap-4\">\n  <!-- ----- Recurrence presets ----- -->\n  <ax-selection-list\n    [items]=\"presetItems()\"\n    [ngModel]=\"preset()\"\n    (onValueChanged)=\"onPresetChange($event)\"\n    direction=\"horizontal\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    valueField=\"id\"\n    textField=\"text\"\n    [disabled]=\"disabled()\"\n  ></ax-selection-list>\n\n  @if (preset() === 'hourly') {\n    <!-- ----- Hourly interval and minute ----- -->\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1 w-28\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.every' | translate | async }}</ax-label>\n        <ax-number-box\n          [ngModel]=\"model().hourInterval\"\n          (onValueChanged)=\"onHourIntervalChange($event)\"\n          [minValue]=\"1\"\n          [maxValue]=\"23\"\n          [disabled]=\"disabled()\"\n          [showSpinButtons]=\"true\"\n        ></ax-number-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.hours' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.at-minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n  <!-- ----- Daily time ----- -->\n  @else if (preset() === 'daily') {\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"hourItems\"\n          [value]=\"'' + model().hour\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onHourChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n  <!-- ----- Weekly days and time ----- -->\n  @else if (preset() === 'weekly') {\n    <div class=\"flex flex-col gap-3\">\n      <ax-selection-list\n        [items]=\"weekdayItems()\"\n        [ngModel]=\"model().weekdays\"\n        (onValueChanged)=\"onWeekdaysChange($event)\"\n        direction=\"horizontal\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        valueField=\"id\"\n        textField=\"text\"\n        [disabled]=\"disabled()\"\n      ></ax-selection-list>\n      <div class=\"flex flex-wrap items-end gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n          <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n        </div>\n        <div class=\"flex flex-col gap-1 w-24\">\n          <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n          <ax-combo-box\n            [items]=\"hourItems\"\n            [value]=\"'' + model().hour\"\n            [searchable]=\"false\"\n            [disabled]=\"disabled()\"\n            (onValueChanged)=\"onHourChange($event)\"\n          ></ax-combo-box>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n          <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n        </div>\n        <div class=\"flex flex-col gap-1 w-24\">\n          <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n          <ax-combo-box\n            [items]=\"minuteItems\"\n            [value]=\"'' + model().minute\"\n            [searchable]=\"false\"\n            [disabled]=\"disabled()\"\n            (onValueChanged)=\"onMinuteChange($event)\"\n          ></ax-combo-box>\n        </div>\n      </div>\n    </div>\n  }\n  <!-- ----- Monthly day and time ----- -->\n  @else if (preset() === 'monthly') {\n    <div class=\"flex flex-wrap items-end gap-3\">\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.on-day' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.day-of-month' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"monthDayItems\"\n          [value]=\"'' + model().monthDay\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMonthDayChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">{{ i18n + '.fields.at' | translate | async }}</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.hour' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"hourItems\"\n          [value]=\"'' + model().hour\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onHourChange($event)\"\n        ></ax-combo-box>\n      </div>\n      <div class=\"flex flex-col gap-1\">\n        <ax-label class=\"text-sm invisible select-none\" aria-hidden=\"true\">&nbsp;</ax-label>\n        <ax-label class=\"flex h-9 items-center text-sm\">:</ax-label>\n      </div>\n      <div class=\"flex flex-col gap-1 w-24\">\n        <ax-label class=\"text-sm\">{{ i18n + '.fields.minute' | translate | async }}</ax-label>\n        <ax-combo-box\n          [items]=\"minuteItems\"\n          [value]=\"'' + model().minute\"\n          [searchable]=\"false\"\n          [disabled]=\"disabled()\"\n          (onValueChanged)=\"onMinuteChange($event)\"\n        ></ax-combo-box>\n      </div>\n    </div>\n  }\n\n  @if (summary()) {\n    <!-- ----- Human-readable schedule summary ----- -->\n    <ax-badge size=\"sm\" look=\"twotone\" color=\"primary\" [text]=\"summary()\"></ax-badge>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+//#endregion
+function coerceSelectNumber(value, fallback) {
+    const scalar = Array.isArray(value) ? value[0] : value;
+    if (scalar == null || scalar === '') {
+        return fallback;
+    }
+    const parsed = Number(scalar);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function normalizeWeekdaySelection(value) {
+    const raw = Array.isArray(value) ? value : value == null ? [] : [value];
+    const days = raw
+        .map((day) => Number(day))
+        .filter((day) => Number.isInteger(day) && day >= 0 && day <= 6);
+    return [...new Set(days)].sort((left, right) => left - right);
+}
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
 class AXPCronJobWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Services & Dependencies -----
+        this.display = inject(AXPCronExpressionDisplayService);
+        //#endregion
+        //#region ----- State Signals -----
+        this.summary = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        this.rawExpression = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rawExpression" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.#describe = effect(() => {
+            const raw = normalizeCronExpression(this.rawValue);
+            this.rawExpression.set(raw);
+            void this.refreshSummary(raw);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#describe" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    #describe;
+    //#endregion
+    //#region ----- Private helpers -----
+    async refreshSummary(raw) {
+        this.summary.set(raw ? await this.display.describe(raw) : '');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCronJobWidgetColumnComponent, isStandalone: true, selector: "axp-cron-job-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `{{ rawValue }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCronJobWidgetColumnComponent, isStandalone: true, selector: "axp-cron-job-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
+    @if (summary()) {
+      <!-- ----- Human-readable cron with raw tooltip ----- -->
+      <span class="text-sm" [title]="rawExpression()">{{ summary() }}</span>
+    }
+    <!-- ----- Empty cron cell ----- -->
+    @else {
+      <span class="text-sm text-muted">---</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-cron-job-widget-column',
-                    template: `{{ rawValue }}`,
+                    template: `
+    @if (summary()) {
+      <!-- ----- Human-readable cron with raw tooltip ----- -->
+      <span class="text-sm" [title]="rawExpression()">{{ summary() }}</span>
+    }
+    <!-- ----- Empty cron cell ----- -->
+    @else {
+      <span class="text-sm text-muted">---</span>
+    }
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     inputs: ['rawValue', 'rowData'],
                 }]
@@ -24803,49 +24797,44 @@ var cronJobWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPCronJobWidgetColumnComponent: AXPCronJobWidgetColumnComponent
 });
 
-class AXPCronJobWidgetDesignerComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.expreesion = signal('* * * ? * * *', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "expreesion" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCronJobWidgetDesignerComponent, isStandalone: true, selector: "axp-cron-job-widget-designer", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i1$l.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetDesignerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-cron-job-widget-designer',
-                    template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXCronJobModule, FormsModule],
-                }]
-        }] });
-
-var cronJobWidgetDesigner_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPCronJobWidgetDesignerComponent: AXPCronJobWidgetDesignerComponent
-});
-
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
 class AXPCronJobWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.expreesion = signal('* * * ? * * *', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "expreesion" }] : /* istanbul ignore next */ []));
-    }
-    getExpressionHandler(e) {
-        this.setValue(e.data);
+        //#region ----- Computed Properties -----
+        this.boundValue = computed(() => {
+            const value = this.getValue();
+            return typeof value === 'string' ? value : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boundValue" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => Boolean(this.options()['disabled']), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "axp-cron-job-widget-edit", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i1$l.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "axp-cron-job-widget-edit", host: { classAttribute: "block flex-1" }, usesInheritance: true, ngImport: i0, template: `
+    <axp-cron-expression-editor
+      [value]="boundValue()"
+      [disabled]="disabled()"
+      (valueChange)="setValue($event)"
+    ></axp-cron-expression-editor>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPCronExpressionEditorComponent, selector: "axp-cron-expression-editor", inputs: ["value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-cron-job-widget-edit',
-                    template: `<ax-cron-job-container [ngModel]="expreesion()"> </ax-cron-job-container>`,
+                    template: `
+    <axp-cron-expression-editor
+      [value]="boundValue()"
+      [disabled]="disabled()"
+      (valueChange)="setValue($event)"
+    ></axp-cron-expression-editor>
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, AXCronJobModule],
+                    imports: [AXPCronExpressionEditorComponent],
+                    host: { class: 'block flex-1' },
                 }]
         }] });
 
@@ -24854,21 +24843,78 @@ var cronJobWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPCronJobWidgetEditComponent: AXPCronJobWidgetEditComponent
 });
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
 class AXPCronJobWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.internalValue = computed(() => this.getValue(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+        //#region ----- Services & Dependencies -----
+        this.display = inject(AXPCronExpressionDisplayService);
+        //#endregion
+        //#region ----- State Signals -----
+        this.summary = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        this.rawExpression = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rawExpression" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.#describe = effect(() => {
+            const raw = normalizeCronExpression(this.getValue());
+            this.rawExpression.set(raw);
+            void this.refreshSummary(raw);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#describe" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    #describe;
+    //#endregion
+    //#region ----- Private helpers -----
+    async refreshSummary(raw) {
+        this.summary.set(raw ? await this.display.describe(raw) : '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPCronJobWidgetViewComponent, isStandalone: true, selector: "axp-cron-job-widget-view", usesInheritance: true, ngImport: i0, template: `<p>{{ internalValue() }}</p>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCronJobWidgetViewComponent, isStandalone: true, selector: "axp-cron-job-widget-view", host: { classAttribute: "inline-block" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="flex flex-col gap-0.5 p-2">
+      @if (summary()) {
+        <!-- ----- Human-readable cron summary ----- -->
+        <ax-label class="text-sm">{{ summary() }}</ax-label>
+      }
+      <!-- ----- Fallback when no expression is stored ----- -->
+      @else {
+        <ax-label class="text-sm text-muted">---</ax-label>
+      }
+      @if (rawExpression()) {
+        <!-- ----- Raw unix cron ----- -->
+        <ax-label class="text-xs text-muted font-mono" dir="ltr">{{ rawExpression() }}</ax-label>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronJobWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-cron-job-widget-view',
-                    template: `<p>{{ internalValue() }}</p>`,
+                    template: `
+    <div class="flex flex-col gap-0.5 p-2">
+      @if (summary()) {
+        <!-- ----- Human-readable cron summary ----- -->
+        <ax-label class="text-sm">{{ summary() }}</ax-label>
+      }
+      <!-- ----- Fallback when no expression is stored ----- -->
+      @else {
+        <ax-label class="text-sm text-muted">---</ax-label>
+      }
+      @if (rawExpression()) {
+        <!-- ----- Raw unix cron ----- -->
+        <ax-label class="text-xs text-muted font-mono" dir="ltr">{{ rawExpression() }}</ax-label>
+      }
+    </div>
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXLabelComponent],
+                    host: { class: 'inline-block' },
                 }]
         }] });
 
@@ -24880,6 +24926,7 @@ var cronJobWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPCronJobWidget = {
     name: 'cron-job',
     title: '@platform-layout-widgets:widgets.cron-job.title',
+    description: '@platform-layout-widgets:widgets.cron-job.description',
     icon: 'fa-light fa-alarm-clock',
     categories: [AXP_WIDGETS_ADVANCE_CATEGORY],
     subCategory: AXP_WIDGETS_ADVANCE_SUB_INPUT,
@@ -24897,7 +24944,7 @@ const AXPCronJobWidget = {
             component: () => Promise.resolve().then(function () { return cronJobWidgetColumn_component; }).then((c) => c.AXPCronJobWidgetColumnComponent),
         },
         designer: {
-            component: () => Promise.resolve().then(function () { return cronJobWidgetDesigner_component; }).then((c) => c.AXPCronJobWidgetDesignerComponent),
+            component: () => Promise.resolve().then(function () { return cronJobWidgetEdit_component; }).then((c) => c.AXPCronJobWidgetEditComponent),
         },
     },
 };
@@ -26466,7 +26513,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: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-2 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      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ms-auto flex shrink-0 items-center gap-1 md:gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (showColumnsControl()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n          <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"py-2 px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n          <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"py-2 px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n            <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"py-2 px-2\">\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\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption() && (hasCardListDisplayOption() || hasRowListDisplayOption())) {\n                  <ax-divider />\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\"></i>\n                    </ax-prefix>\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\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 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", "quickSearch"], outputs: ["onFiltersChanged"] }, { 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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.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: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex items-center gap-2 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      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ms-auto flex shrink-0 items-center gap-1 md:gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (showColumnsControl()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n          <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"py-2 px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n          <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"py-2 px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n            <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"py-2 px-2\">\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\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption() && (hasCardListDisplayOption() || hasRowListDisplayOption())) {\n                  <ax-divider />\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\"></i>\n                    </ax-prefix>\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\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 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", "quickSearch"], outputs: ["onFiltersChanged"] }, { 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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -27233,7 +27280,7 @@ class AXPTabularDataWidgetEditComponent extends AXPValueWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-CRST84ou.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-TWxthl21.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
             header: true,
@@ -27285,7 +27332,7 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPValueWidgetComponent {
         this.columns = this.options()['columns'];
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-tabular-data-view-popup.component-FjtSRxIX.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-tabular-data-view-popup.component-D7P08nHH.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -27445,8 +27492,8 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPTimerDurationWidgetEditComponent, isStandalone: true, selector: "axp-time-duration-widget-edit", usesInheritance: true, ngImport: i0, template: `
     @if (filterMode()) {
-      <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
-        <div class="ax-flex-1">
+      <div class="flex items-center" [class.gap-2]="operationsMenuVisible()">
+        <div class="flex-1">
           <ax-time-duration
             [ngModel]="filterEditorValue()"
             (onValueChanged)="handleFilterValueChange($event)"
@@ -27459,43 +27506,20 @@ 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"></ax-validation-rule>
             }
           </ax-time-duration>
         </div>
-        <axp-filter-operations
-          [type]="'number'"
-          [operations]="operations()"
-          [selectedOperation]="operation().type"
-          (selectedOperationChange)="handleOperationChanged($event)"
-        ></axp-filter-operations>
+        <axp-filter-operations [type]="'number'" [operations]="operations()" [selectedOperation]="operation().type" (selectedOperationChange)="handleOperationChanged($event)"></axp-filter-operations>
       </div>
     } @else {
-      <ax-time-duration
-        [ngModel]="getValue()"
-        (onValueChanged)="handleChangeValue($event)"
-        [valueStart]="from()"
-        [valueEnd]="to()"
-        [label]="label()"
-        [minValue]="minValue()"
-        [maxValue]="maxValue()"
-        [disabled]="disabled()"
-        [maskDigits]="maskDigits()"
-      >
+      <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"></ax-validation-rule>
         }
       </ax-time-duration>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: AXTimeDurationModule }, { kind: "component", type: i3$7.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -27503,8 +27527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'axp-time-duration-widget-edit',
                     template: `
     @if (filterMode()) {
-      <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
-        <div class="ax-flex-1">
+      <div class="flex items-center" [class.gap-2]="operationsMenuVisible()">
+        <div class="flex-1">
           <ax-time-duration
             [ngModel]="filterEditorValue()"
             (onValueChanged)="handleFilterValueChange($event)"
@@ -27517,39 +27541,16 @@ 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"></ax-validation-rule>
             }
           </ax-time-duration>
         </div>
-        <axp-filter-operations
-          [type]="'number'"
-          [operations]="operations()"
-          [selectedOperation]="operation().type"
-          (selectedOperationChange)="handleOperationChanged($event)"
-        ></axp-filter-operations>
+        <axp-filter-operations [type]="'number'" [operations]="operations()" [selectedOperation]="operation().type" (selectedOperationChange)="handleOperationChanged($event)"></axp-filter-operations>
       </div>
     } @else {
-      <ax-time-duration
-        [ngModel]="getValue()"
-        (onValueChanged)="handleChangeValue($event)"
-        [valueStart]="from()"
-        [valueEnd]="to()"
-        [label]="label()"
-        [minValue]="minValue()"
-        [maxValue]="maxValue()"
-        [disabled]="disabled()"
-        [maskDigits]="maskDigits()"
-      >
+      <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"></ax-validation-rule>
         }
       </ax-time-duration>
     }
@@ -27729,13 +27730,27 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     }
+    /**
+     * Lookup may skip `onValueChanged` on the first pick (`#lastValue === undefined`).
+     * `onItemSelected` always fires from `handleSinglePick`.
+     */
+    handleItemSelected(e) {
+        const text = e.item?.['text'];
+        this.commitSelection(e.item?.['value'], typeof text === 'string' ? text : undefined);
+    }
     handleValueChange(e) {
-        if (e.isUserInteraction) {
-            this.setValue({
-                value: e.value,
-                operation: this.negative() ? { type: 'notEqual' } : { type: 'equal' },
-            });
+        this.commitSelection(e.value);
+    }
+    commitSelection(value, displayText) {
+        if (typeof value !== 'boolean') {
+            return;
         }
+        const item = this.items.find((c) => c.value === value);
+        this.setValue({
+            value,
+            operation: this.negative() ? { type: 'notEqual' } : { type: 'equal' },
+            displayText: displayText ?? item?.text,
+        });
     }
     #effect;
     focus() {
@@ -27753,11 +27768,12 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
         [dataSource]="dataSource"
         [ngModel]="value()"
+        (onItemSelected)="handleItemSelected($event)"
         (onValueChanged)="handleValueChange($event)"
       >
       </ax-lookup>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -27773,6 +27789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
         [dataSource]="dataSource"
         [ngModel]="value()"
+        (onItemSelected)="handleItemSelected($event)"
         (onValueChanged)="handleValueChange($event)"
       >
       </ax-lookup>
@@ -28131,7 +28148,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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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", "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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStatusFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -28452,7 +28469,7 @@ class AXPAlertBoxWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         <div [innerHTML]="innerContent()"></div>
       </ax-content>
     </ax-alert>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAlertModule }, { kind: "component", type: i1$m.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAlertModule }, { kind: "component", type: i1$j.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAlertBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -28516,7 +28533,7 @@ class AXPAlertBoxWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
         <div [innerHTML]="innerContent()"></div>
       </ax-content>
     </ax-alert>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAlertModule }, { kind: "component", type: i1$m.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAlertModule }, { kind: "component", type: i1$j.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAlertBoxWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -30138,7 +30155,7 @@ class AXPPanelWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
         }
       </ax-accordion-item>
     </ax-accordion-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$n.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$n.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$k.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$k.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPanelWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -30240,7 +30257,7 @@ class AXPPanelWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
       </ax-accordion-item>
     </ax-accordion-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$n.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$n.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$k.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$k.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPanelWidgetViewComponent, decorators: [{
             type: Component,
@@ -30488,7 +30505,7 @@ class AXPTabSetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host.vertical{display:flex;width:100%;flex-direction:row}:host.vertical .content{display:block;width:100%}:host.horizontal{display:flex;width:100%;flex-direction:column}:host.horizontal .content{margin-top:calc(var(--spacing, .25rem) * 4);display:block;width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host.vertical{display:flex;width:100%;flex-direction:row}:host.vertical .content{display:block;width:100%}:host.horizontal{display:flex;width:100%;flex-direction:column}:host.horizontal .content{margin-top:calc(var(--spacing, .25rem) * 4);display:block;width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i5.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTabSetWidgetViewComponent, decorators: [{
             type: Component,
@@ -31140,7 +31157,7 @@ class AXPTriggersWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTriggersWidgetEditComponent, decorators: [{
             type: Component,
@@ -31330,7 +31347,7 @@ class AXPTriggerExpressionEditorPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXCodeEditorModule }, { kind: "component", type: i1$c.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTriggerExpressionEditorPopupComponent, decorators: [{
             type: Component,
@@ -31428,7 +31445,6 @@ const REGISTERED_WIDGETS = [
     AXPQrcodeWidget,
     AXPSchedulerPickerWidget,
     AXPPasswordBoxWidget,
-    AXPGalleryWidget,
     AXPFileViewerWidget,
     AXPCodeEditorWidget,
     AXPJsonViewerWidget,
@@ -31560,7 +31576,6 @@ class AXPWidgetsModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetsModule, providers: [
             { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXPCoreWidgetsProvider, multi: true },
             { provide: STRATEGY_CONFIG_TOKEN, useValue: DEFAULT_STRATEGY_CONFIG },
-            importProvidersFrom(AXMediaViewerModule.forRoot()),
             ...provideFileViewer(),
             //TODO convert dialogService to layoutBuilder saeed:
             provideQuerySetups([
@@ -31578,7 +31593,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     providers: [
                         { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXPCoreWidgetsProvider, multi: true },
                         { provide: STRATEGY_CONFIG_TOKEN, useValue: DEFAULT_STRATEGY_CONFIG },
-                        importProvidersFrom(AXMediaViewerModule.forRoot()),
                         ...provideFileViewer(),
                         //TODO convert dialogService to layoutBuilder saeed:
                         provideQuerySetups([
@@ -31970,5 +31984,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetPrintComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorChooserWidget, AXPColorChooserWidgetColumnComponent, AXPColorChooserWidgetDesignerComponent, AXPColorChooserWidgetEditComponent, AXPColorChooserWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileViewerWidget, AXPFileViewerWidgetEditComponent, AXPFileViewerWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPIntegrationConnectionActionsService, AXPIntegrationConnectionsPanelWidget, AXPIntegrationConnectionsPanelWidgetEditComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNodeRendererWidget, AXPNodeRendererWidgetEditComponent, AXPNodeRendererWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_QRCODE_SIZE, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, prepareNodeRendererChild, resolveColorChooserGroups, resolveDataListColumnWidth };
+export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetPrintComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorChooserWidget, AXPColorChooserWidgetColumnComponent, AXPColorChooserWidgetDesignerComponent, AXPColorChooserWidgetEditComponent, AXPColorChooserWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConditionBuilderWidget, AXPConditionBuilderWidgetEditComponent, AXPConditionBuilderWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileViewerWidget, AXPFileViewerWidgetEditComponent, AXPFileViewerWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGetWidgetsForAIQuery, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPIntegrationConnectionActionsService, AXPIntegrationConnectionsPanelWidget, AXPIntegrationConnectionsPanelWidgetEditComponent, AXPItemConfiguratorWidget, AXPItemConfiguratorWidgetColumnComponent, AXPItemConfiguratorWidgetEditComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNodeRendererWidget, AXPNodeRendererWidgetEditComponent, AXPNodeRendererWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPOutcomeResultsViewerWidget, AXPOutcomeResultsViewerWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPProviderSelectWidgetColumnComponent, AXPProviderSelectWidgetEditBase, AXPProviderSelectWidgetViewComponent, AXPQrcodeViewerService, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_DATA_LIST_CMD_DELETE, AXP_DATA_LIST_CMD_EDIT, AXP_DATA_LIST_PENDING_DELETE_KEY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP, AXP_ROW_EXPR_PREFIX, AXP_SPACING_UNITS, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_QRCODE_SIZE, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, prepareNodeRendererChild, resolveColorChooserGroups, resolveDataListColumnWidth };
 //# sourceMappingURL=acorex-platform-framework-client-layout-widgets.mjs.map