@acorex-platform/framework-client 0.0.53 → 0.0.56

package/fesm2022/{acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-CWvC9Eh2.mjs → acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-DuFZf8eb.mjs}

@@ -9,16 +9,16 @@ import * as i1$1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3$1 from '@acorex/components/form';
+import * as i3 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i2 from '@acorex/components/label';
 import { AXLabelModule, AXLabelComponent } from '@acorex/components/label';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i1$2 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i1$7 from '@acorex/components/text-box';
+import * as i1$8 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i3 from '@acorex/core/translation';
+import * as i1$6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, resolveMultiLanguageString as resolveMultiLanguageString$1 } from '@acorex/core/translation';
 import { AXP_LOCALE_MANAGEMENT_PORT, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, ALL_DEFAULT_OPERATORS, AXPClipBoardService, AXPSettingsService, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, 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';
@@ -26,11 +26,11 @@ import * as i1$5 from '@angular/common';
 import { CommonModule, AsyncPipe, NgTemplateOutlet } 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, EnvironmentInjector, ApplicationRef, afterNextRender, ChangeDetectorRef, output, Input, ElementRef, afterEveryRender, NgZone, NgModule } from '@angular/core';
-import * as i1$6 from '@angular/forms';
+import * as i1$7 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXLookupComponent } from '@acorex/components/lookup';
 import { AXFormatService } from '@acorex/core/format';
-import { resolveMultiLanguageString, setSmart, omitFilterClauseIdentity, createRandomUuid, themeSurfaceVariantFromClass, toRuntimeSurfaceClassName, resolveToSurfaceClass, parseRuntimeHexSurface, listThemeSurfaceGroups, normalizeHexColor, extractValue, AXPRegionalSetting, filterOperatorAllowsEmptyValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, isFormValueEqual, isSelectionValueEqual, isLocaleStringMap, AXPWidgetsCatalog, runtimeQueryCollectionData, AXP_INTEGRATION_CONNECTION_STATUS, AXP_INTEGRATION_AUTH_METHOD_TYPE, sortByMultiLanguageString, axpGridItemPlacementClassMap, AXPFileStorageStatus, AXPPlatformScope, flattenQueryFilterUserGroups, isPersistableFilterQuery, resolveFilterQueryIdentityField, axpGridNarrowContainerQueryPrefix, normalizeDefinitionCategories, runtimeQueryFailure, runtimeQuerySuccessObject } from '@acorex-platform/framework-shared/core';
+import { resolveMultiLanguageString, setSmart, omitFilterClauseIdentity, createRandomUuid, themeSurfaceVariantFromClass, toRuntimeSurfaceClassName, resolveToSurfaceClass, parseRuntimeHexSurface, listThemeSurfaceGroups, normalizeHexColor, extractValue, AXPRegionalSetting, filterOperatorAllowsEmptyValue, shouldUseLocaleMapShape, buildLocaleTextMapValue, isFormValueEqual, isSelectionValueEqual, isLocaleStringMap, AXPWidgetsCatalog, runtimeQueryCollectionData, AXP_INTEGRATION_CONNECTION_STATUS, AXP_INTEGRATION_AUTH_METHOD_TYPE, sortByMultiLanguageString, axpGridItemPlacementClassMap, AXPFileStorageStatus, AXPPlatformScope, flattenQueryFilterUserGroups, isPersistableFilterQuery, axpGridNarrowContainerQueryPrefix, normalizeDefinitionCategories, runtimeQueryFailure, runtimeQuerySuccessObject } from '@acorex-platform/framework-shared/core';
 import { get, set, castArray, isNil, cloneDeep, isEqual, isNull, isEmpty, isPlainObject, isString, isNumber, defaultTo, has } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
@@ -45,10 +45,10 @@ import * as i2$3 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import { AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import { AXPLayoutBuilderService } from '@acorex-platform/framework-client/layout/builder';
-import * as i3$3 from '@acorex/components/datetime-box';
+import * as i3$2 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import { AXCalendarService, AXTimeDurationFormatter } from '@acorex/core/date-time';
-import * as i3$2 from '@acorex/components/popover';
+import * as i3$1 from '@acorex/components/popover';
 import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
 import * as i2$4 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
@@ -58,35 +58,35 @@ import { AXEditorComponent } from '@acorex/components/editor';
 import * as i4 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXPWidgetDesignerRendererDirective, AXPDesignerService, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerFlexDrawerComponent, AXPDesignerAddWidgetLineButtonComponent } from '@acorex-platform/framework-client/layout/designer';
-import * as i1$8 from '@acorex/components/number-box';
+import * as i1$9 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i3$4 from '@acorex/components/password-box';
+import * as i3$3 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
-import * as i1$9 from '@acorex/components/progress-bar';
+import * as i1$a from '@acorex/components/progress-bar';
 import { AXProgressBarModule } from '@acorex/components/progress-bar';
-import * as i3$5 from '@acorex/components/range-slider';
+import * as i3$4 from '@acorex/components/range-slider';
 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$6 from '@acorex/components/skeleton';
+import * as i3$5 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXLocaleService } from '@acorex/core/locale';
 import { merge, first, firstValueFrom } from 'rxjs';
 import * as i2$6 from '@acorex/components/autocomplete';
 import { AXAutocompleteModule } from '@acorex/components/autocomplete';
-import * as i1$a from '@acorex/components/tag-box';
+import * as i1$b from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
-import * as i1$b from '@acorex/components/chips';
+import * as i1$c from '@acorex/components/chips';
 import { AXChipsModule } from '@acorex/components/chips';
 import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i2$7 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { AXFileService } from '@acorex/core/file';
-import * as i1$c from '@acorex/components/data-table';
+import * as i1$d from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXToastService } from '@acorex/components/toast';
@@ -94,32 +94,32 @@ 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$d from '@acorex/components/json-viewer';
+import * as i1$e from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
-import * as i1$e from '@acorex/components/map';
+import * as i1$f from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import * as i5$1 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import * as i4$1 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import * as i3$7 from '@acorex/components/paint';
+import * as i3$6 from '@acorex/components/paint';
 import { AXPaintModule } from '@acorex/components/paint';
-import * as i1$f 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 { moveItemInArray } from '@acorex/cdk/drag-drop';
-import * as i1$g from '@acorex/components/step-wizard';
+import * as i1$h from '@acorex/components/step-wizard';
 import { AXStepWizardModule } from '@acorex/components/step-wizard';
-import * as i1$h 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 { mergeDefinitionAndCustomQueryViews, toRelatedListViewQuery, isCustomQueryView, isQueryViewDirty, isQueryViewColumnVisible, mergeHiddenScopeFilters, mergeHiddenFiltersWithViewConditions, applyQueryViewToColumnQueries, snapshotCustomQueryView, createCustomQueryViewName, removePersistedCustomQueryView, queryViewConditionsToFilterQueries, upsertPersistedCustomQueryView, readPersistedCustomQueryViews, normalizeEntityMasterListLayoutType } from '@acorex-platform/framework-shared/entity';
-import * as i3$8 from '@acorex/components/time-duration';
+import { mergeDefinitionAndCustomQueryViews, toRelatedListViewQuery, isCustomQueryView, isQueryViewDirty, isQueryViewColumnVisible, withQueryViewFilterVisibility, mergeHiddenScopeFilters, mergeHiddenFiltersWithViewConditions, applyQueryViewToColumnQueries, snapshotCustomQueryView, createCustomQueryViewName, removePersistedCustomQueryView, upsertPersistedCustomQueryView, readPersistedCustomQueryViews, normalizeEntityMasterListLayoutType } from '@acorex-platform/framework-shared/entity';
+import * as i3$7 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
-import * as i1$i 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$j 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';
 import { AXP_ENTITY_DEFINITION_CRUD_SERVICE } from '@acorex-platform/framework-client/domain';
@@ -377,7 +377,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.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$1.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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i1$2.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$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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.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$1.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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i1$2.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$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectLanguagePopup, decorators: [{
             type: Component,
@@ -683,7 +683,7 @@ class AXPProviderSelectWidgetViewComponent extends AXPDataListWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPProviderSelectWidgetViewComponent, decorators: [{
             type: Component,
@@ -752,7 +752,7 @@ class AXPProviderSelectWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPProviderSelectWidgetColumnComponent, decorators: [{
             type: Component,
@@ -975,7 +975,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-button-widget-designer.component-BkrPu1wO.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-button-widget-designer.component-Cw2yZfaz.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -1255,7 +1255,7 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
             return;
         }
         try {
-            const { AXPConditionBuilderEditPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-condition-builder-edit-popup.component-WpiEHusZ.mjs');
+            const { AXPConditionBuilderEditPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-condition-builder-edit-popup.component-Cbd5Va40.mjs');
             const title = (await this.translation.translateAsync(I18N$2.editConditions)) ?? '';
             const result = await this.popupService.open(AXPConditionBuilderEditPopupComponent, {
                 title,
@@ -1284,7 +1284,7 @@ class AXPConditionBuilderWidgetEditComponent extends AXPValueWidgetComponent {
         return translated || key;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderWidgetEditComponent, isStandalone: true, selector: "axp-condition-builder-widget-edit", host: { classAttribute: "block min-w-0 w-full" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axp-condition-builder-widget-edit\">\n  @if (isSummaryLook()) {\n    <!-- ----- Compact chip; click opens the full condition editor ----- -->\n    <button\n      type=\"button\"\n      class=\"axp-condition-builder-summary\"\n      [class.axp-condition-builder-summary--empty]=\"!tokens().length\"\n      [disabled]=\"disabled()\"\n      [attr.title]=\"sentence() || null\"\n      (click)=\"openEditor()\"\n    >\n      <!---->\n      <!-- ----- Applied conditions as a query-filters chip ----- -->\n      @if (tokens().length) {\n        @for (token of tokens(); track $index) {\n          <!---->\n          <!-- ----- Chip tokens: title, operator, value, AND/OR ----- -->\n          @switch (token.kind) {\n            @case ('title') {\n              <span class=\"axp-condition-builder-summary__title\">{{ token.text }}</span>\n            }\n            @case ('operator') {\n              <span class=\"axp-condition-builder-summary__operator\">{{ token.text }}</span>\n            }\n            @case ('value') {\n              <span class=\"axp-condition-builder-summary__value\">'{{ token.text }}'</span>\n            }\n            @case ('logic') {\n              <span class=\"axp-condition-builder-summary__logic\">{{ token.text }}</span>\n            }\n            @case ('paren') {\n              <span class=\"axp-condition-builder-summary__paren\">{{ token.text }}</span>\n            }\n          }\n        }\n      }\n      <!-- ----- Placeholder when no complete conditions exist ----- -->\n      @else {\n        <span class=\"axp-condition-builder-summary__placeholder\">{{\n          I18N.addConditions | translate | async\n        }}</span>\n      }\n    </button>\n  }\n  <!-- ----- Inline builder when summary look is not requested ----- -->\n  @else {\n    <axp-condition-builder\n      [value]=\"valueForBuilder()\"\n      [filterDefinitions]=\"filterDefinitions()\"\n      [operationsLook]=\"operationsLook()\"\n      (valueChange)=\"onValueChange($event)\"\n    />\n  }\n</div>\n", styles: ["@layer properties;.axp-condition-builder-summary{display:inline-flex;max-width:100%;min-width:0px;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;border-radius:var(--radius-lg, .5rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;font:inherit;color:inherit;border:none;text-align:start}.axp-condition-builder-summary:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-condition-builder-summary:disabled{cursor:not-allowed;opacity:60%}.axp-condition-builder-summary--empty{opacity:70%}.axp-condition-builder-summary__title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-condition-builder-summary__operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-condition-builder-summary__logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-condition-builder-summary__value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-condition-builder-summary__paren{flex-shrink:0;opacity:70%}.axp-condition-builder-summary__placeholder{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPConditionBuilderComponent, selector: "axp-condition-builder", inputs: ["value", "filterDefinitions", "showFillByUser", "operationsLook"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderWidgetEditComponent, isStandalone: true, selector: "axp-condition-builder-widget-edit", host: { classAttribute: "block min-w-0 w-full" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axp-condition-builder-widget-edit\">\n  @if (isSummaryLook()) {\n    <!-- ----- Compact chip; click opens the full condition editor ----- -->\n    <button\n      type=\"button\"\n      class=\"axp-condition-builder-summary\"\n      [class.axp-condition-builder-summary--empty]=\"!tokens().length\"\n      [disabled]=\"disabled()\"\n      [attr.title]=\"sentence() || null\"\n      (click)=\"openEditor()\"\n    >\n      <!---->\n      <!-- ----- Applied conditions as a query-filters chip ----- -->\n      @if (tokens().length) {\n        @for (token of tokens(); track $index) {\n          <!---->\n          <!-- ----- Chip tokens: title, operator, value, AND/OR ----- -->\n          @switch (token.kind) {\n            @case ('title') {\n              <span class=\"axp-condition-builder-summary__title\">{{ token.text }}</span>\n            }\n            @case ('operator') {\n              <span class=\"axp-condition-builder-summary__operator\">{{ token.text }}</span>\n            }\n            @case ('value') {\n              <span class=\"axp-condition-builder-summary__value\">'{{ token.text }}'</span>\n            }\n            @case ('logic') {\n              <span class=\"axp-condition-builder-summary__logic\">{{ token.text }}</span>\n            }\n            @case ('paren') {\n              <span class=\"axp-condition-builder-summary__paren\">{{ token.text }}</span>\n            }\n          }\n        }\n      }\n      <!-- ----- Placeholder when no complete conditions exist ----- -->\n      @else {\n        <span class=\"axp-condition-builder-summary__placeholder\">{{\n          I18N.addConditions | translate | async\n        }}</span>\n      }\n    </button>\n  }\n  <!-- ----- Inline builder when summary look is not requested ----- -->\n  @else {\n    <axp-condition-builder\n      [value]=\"valueForBuilder()\"\n      [filterDefinitions]=\"filterDefinitions()\"\n      [operationsLook]=\"operationsLook()\"\n      (valueChange)=\"onValueChange($event)\"\n    />\n  }\n</div>\n", styles: ["@layer properties;.axp-condition-builder-summary{display:inline-flex;max-width:100%;min-width:0px;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;border-radius:var(--radius-lg, .5rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;font:inherit;color:inherit;border:none;text-align:start}.axp-condition-builder-summary:hover:not(:disabled){background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-condition-builder-summary:disabled{cursor:not-allowed;opacity:60%}.axp-condition-builder-summary--empty{opacity:70%}.axp-condition-builder-summary__title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-condition-builder-summary__operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-condition-builder-summary__logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-condition-builder-summary__value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-condition-builder-summary__paren{flex-shrink:0;opacity:70%}.axp-condition-builder-summary__placeholder{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPConditionBuilderComponent, selector: "axp-condition-builder", inputs: ["value", "filterDefinitions", "showFillByUser", "operationsLook"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderWidgetEditComponent, decorators: [{
             type: Component,
@@ -1575,7 +1575,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
       }
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -1658,7 +1658,7 @@ class AXPCheckBoxWidgetDesignerComponent extends AXPValueWidgetComponent {
         <ax-label>{{ label() | translate | async }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "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"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -1713,7 +1713,7 @@ class AXPCheckBoxWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-label>{{ label() }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "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"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1830,7 +1830,7 @@ class AXPCheckBoxWidgetPrintComponent extends AXPValueWidgetComponent {
         <span>{{ text | translate | async }}</span>
       }
     </div>
-  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetPrintComponent, decorators: [{
             type: Component,
@@ -1916,7 +1916,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCheckBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -2083,7 +2083,7 @@ class AXPColorBoxWidgetDesignerComponent extends AXPValueWidgetComponent {
         <ax-clear-button></ax-clear-button>
       }
     </ax-color-box>
-  `, 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: 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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorBoxWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -2146,7 +2146,7 @@ class AXPColorBoxWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-clear-button></ax-clear-button>
       }
     </ax-color-box>
-  `, 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: 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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3809,7 +3809,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-lookup>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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$1.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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -4299,7 +4299,7 @@ class AXPFilterOperationsComponent {
         return resolved.length > 0 ? resolved : base;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, host: { properties: { "class.axp-filter-operations--select": "look() === \"select\"" }, classAttribute: "block min-w-0" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n  @if (look() === 'select') {\n    <!-- ----- Operator as a visible dropdown ----- -->\n    <ax-lookup\n      class=\"ax-sm w-full\"\n      mode=\"drop-down-list\"\n      look=\"outline\"\n      [dataSource]=\"operationItems()\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [searchable]=\"false\"\n      [(ngModel)]=\"selectedOperation\"\n    />\n  }\n  <!-- ----- Compact operator menu ----- -->\n  @else {\n    <ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n      <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n    </ax-button>\n    <ax-popover\n      #operatorsPopover\n      [target]=\"changeOperator\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n    >\n      <div\n        class=\"max-h-max overflow-auto bg-lightest py-5 px-3 border border-default rounded-md shadow-md w-full min-w-[250px]\"\n      >\n        <ax-selection-list\n          class=\"\"\n          [valueField]=\"'name'\"\n          [textField]=\"'title'\"\n          [(ngModel)]=\"selectedOperation\"\n          (ngModelChange)=\"operatorsPopover.close()\"\n          [direction]=\"'vertical'\"\n          [items]=\"operationItems()\"\n          [multiple]=\"false\"\n        ></ax-selection-list>\n      </div>\n    </ax-popover>\n  }\n}\n", styles: [":host.axp-filter-operations--select{min-width:9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, host: { properties: { "class.axp-filter-operations--select": "look() === \"select\"" }, classAttribute: "block min-w-0" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n  @if (look() === 'select') {\n    <!-- ----- Operator as a visible dropdown ----- -->\n    <ax-lookup\n      class=\"ax-sm w-full\"\n      mode=\"drop-down-list\"\n      look=\"outline\"\n      [dataSource]=\"operationItems()\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [searchable]=\"false\"\n      [(ngModel)]=\"selectedOperation\"\n    />\n  }\n  <!-- ----- Compact operator menu ----- -->\n  @else {\n    <ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n      <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n    </ax-button>\n    <ax-popover\n      #operatorsPopover\n      [target]=\"changeOperator\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n    >\n      <div\n        class=\"max-h-max overflow-auto bg-lightest py-5 px-3 border border-default rounded-md shadow-md w-full min-w-[250px]\"\n      >\n        <ax-selection-list\n          class=\"\"\n          [valueField]=\"'name'\"\n          [textField]=\"'title'\"\n          [(ngModel)]=\"selectedOperation\"\n          (ngModelChange)=\"operatorsPopover.close()\"\n          [direction]=\"'vertical'\"\n          [items]=\"operationItems()\"\n          [multiple]=\"false\"\n        ></ax-selection-list>\n      </div>\n    </ax-popover>\n  }\n}\n", styles: [":host.axp-filter-operations--select{min-width:9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -4309,6 +4309,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     }, template: "@if (operationItems().length > 1) {\n  @if (look() === 'select') {\n    <!-- ----- Operator as a visible dropdown ----- -->\n    <ax-lookup\n      class=\"ax-sm w-full\"\n      mode=\"drop-down-list\"\n      look=\"outline\"\n      [dataSource]=\"operationItems()\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [searchable]=\"false\"\n      [(ngModel)]=\"selectedOperation\"\n    />\n  }\n  <!-- ----- Compact operator menu ----- -->\n  @else {\n    <ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n      <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n    </ax-button>\n    <ax-popover\n      #operatorsPopover\n      [target]=\"changeOperator\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      [adaptivityEnabled]=\"true\"\n    >\n      <div\n        class=\"max-h-max overflow-auto bg-lightest py-5 px-3 border border-default rounded-md shadow-md w-full min-w-[250px]\"\n      >\n        <ax-selection-list\n          class=\"\"\n          [valueField]=\"'name'\"\n          [textField]=\"'title'\"\n          [(ngModel)]=\"selectedOperation\"\n          (ngModelChange)=\"operatorsPopover.close()\"\n          [direction]=\"'vertical'\"\n          [items]=\"operationItems()\"\n          [multiple]=\"false\"\n        ></ax-selection-list>\n      </div>\n    </ax-popover>\n  }\n}\n", styles: [":host.axp-filter-operations--select{min-width:9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedOperation: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOperation", required: true }] }, { type: i0.Output, args: ["selectedOperationChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], operations: [{ type: i0.Input, args: [{ isSignal: true, alias: "operations", required: false }] }] } });
 
+const AXP_DATETIME_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPDateTimeBoxWidget = {
+    name: 'date-time-editor',
+    title: '@platform-layout-widgets:widgets.date-time-editor.title',
+    description: '@platform-layout-widgets:widgets.date-time-editor.description',
+    icon: 'fa-light fa-calendar',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    type: 'editor',
+    defaultFilterWidgetName: 'datetime-filter',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_HAS_CLEAR_BUTTON_PROPERTY,
+        AXP_DATE_FORMAT_PROPERTY,
+        AXP_DATE_DEPTH_PROPERTY,
+        AXP_DATE_RANGE_LIMIT_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        AXP_PLACEHOLDER_PROPERTY,
+        AXP_TRIGGERS_PROPERTY,
+        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
+        //
+        AXP_REQUIRED_VALIDATION_PROPERTY,
+        AXP_LESS_THAN_VALIDATION_PROPERTY,
+        AXP_GREATER_THAN_VALIDATION_PROPERTY,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetView_component; }).then((c) => c.AXPDateTimeBoxWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetEdit_component; }).then((c) => c.AXPDateTimeBoxWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetColumn_component; }).then((c) => c.AXPDateTimeBoxWidgetColumnComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetEdit_component; }).then((c) => c.AXPDateTimeBoxWidgetEditComponent),
+        },
+    },
+};
+
 class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
     #calendarFormatEffect;
     #presetTranslateEffect;
@@ -4420,7 +4464,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
                 if (ops?.length === 1) {
                     return { type: ops[0].name };
                 }
-                return { type: 'equal' };
+                return { type: AXP_DATETIME_FILTER_DEFAULT_OPERATOR };
             }
             return existing ?? { type: 'between' };
         }, /* @ts-ignore */
@@ -4895,7 +4939,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class.axp-format-time": "this.timeFormatClass", "class": "this.__class" } }, viewQueries: [{ propertyName: "lookup", first: true, predicate: ["lookup"], descendants: true, isSignal: true }, { propertyName: "standardDateTimeBox", first: true, predicate: ["standardDateTimeBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"$safeNavigationMigration(validation.options?.message)\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"w-full mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    #standardDateTimeBox\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class.axp-format-time": "this.timeFormatClass", "class": "this.__class" } }, viewQueries: [{ propertyName: "lookup", first: true, predicate: ["lookup"], descendants: true, isSignal: true }, { propertyName: "standardDateTimeBox", first: true, predicate: ["standardDateTimeBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Filter mode: grid/list filters with operation metadata and optional preset ranges -->\n@if (filterMode()) {\n  <!-- Simple filter UI: operation picker + one or two datetime inputs -->\n  @if (filterUi() === 'simple') {\n    <div class=\"flex items-center w-full\" [class.gap-2]=\"operationsLook() === 'select'\">\n      <!-- Between operation: from / to range inputs -->\n      @if (operation().type === 'between') {\n        <div class=\"flex-1 flex gap-2\">\n          <ax-datetime-box\n            #dateTimeBox\n            class=\"w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            class=\"w-full\"\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [disabled]=\"isValuelessOperation()\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      } @else {\n        <!-- Single-value operations: equal, greaterThan, lessThan, isEmpty, isNotEmpty, etc. -->\n        <ax-datetime-box\n          #dateTimeBox\n          class=\"flex-1\"\n          [format]=\"calendarFormat()\"\n          [picker]=\"format()\"\n          [depth]=\"inputDepth()\"\n          [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n          [disabled]=\"isValuelessOperation()\"\n          [ngModel]=\"filterValue()\"\n          (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n        >\n          <ax-clear-button></ax-clear-button>\n          @for (validation of validationRules(); track $index) {\n            <ax-validation-rule\n              [rule]=\"validation.rule\"\n              [message]=\"$safeNavigationMigration(validation.options?.message)\"\n              [options]=\"validation.options\"\n            ></ax-validation-rule>\n          }\n        </ax-datetime-box>\n      }\n\n      <!-- Operation selector (equal, between, isEmpty, ...) -->\n      <axp-filter-operations\n        class=\"shrink-0\"\n        [class.order-first]=\"operationsLook() === 'select'\"\n        [look]=\"operationsLook()\"\n        type=\"datetime\"\n        [operations]=\"filterOperations()\"\n        [selectedOperation]=\"operation().type\"\n        (selectedOperationChange)=\"handleOperationChange($event)\"\n      ></axp-filter-operations>\n    </div>\n  } @else {\n    <!-- Presets filter UI: relative ranges (Today, This Week, ...) plus manual inputs -->\n    <div class=\"flex flex-col items-center w-full\">\n      <!-- Preset dropdown (Today, Yesterday, This Week, Between, Greater Than, ...) -->\n      @if (resolvedPresets().length) {\n        <ax-lookup\n          #lookup\n          mode=\"drop-down-list\"\n          class=\"w-full\"\n          [dataSource]=\"translatedPresets()\"\n          [valueField]=\"'id'\"\n          [textField]=\"'title'\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\"\n          [ngModel]=\"selectedPresetId()\"\n          (onValueChanged)=\"handlePresetChange($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-lookup>\n      }\n\n      <!-- Manual preset: custom between range -->\n      @if (selectedManualPreset()?.operationType === 'between') {\n        <div class=\"flex gap-2 mt-2 w-full\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterFromMinValue()\"\n            [maxValue]=\"filterFromMaxValue()\"\n            [placeholder]=\"'@general:terms.common.from' | translate | async\"\n            [ngModel]=\"filterRangeValue().from\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'from')\"\n          >\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n          <span class=\"shrink-0 self-center text-sm\">{{ '@common:and' | translate | async }}</span>\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [minValue]=\"filterToMinValue()\"\n            [maxValue]=\"filterToMaxValue()\"\n            [placeholder]=\"'@general:terms.common.to' | translate | async\"\n            [ngModel]=\"filterRangeValue().to\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'to')\"\n          >\n            <ax-clear-button></ax-clear-button>\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n          </ax-datetime-box>\n        </div>\n      }\n\n      <!-- Manual preset: single bound for greaterThan / lessThan -->\n      @if (\n        selectedManualPreset()?.operationType === 'greaterThan' ||\n        selectedManualPreset()?.operationType === 'lessThan'\n      ) {\n        <div class=\"w-full mt-2\">\n          <ax-datetime-box\n            [format]=\"calendarFormat()\"\n            [picker]=\"format()\"\n            [depth]=\"inputDepth()\"\n            [ngModel]=\"filterValue()\"\n            (onValueChanged)=\"handleFilterValueChange($event, 'self')\"\n          >\n            @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n              <ax-validation-rule\n                [rule]=\"validation.rule\"\n                [message]=\"validationMessage(validation)\"\n                [options]=\"validation.options\"\n              ></ax-validation-rule>\n            }\n            <ax-clear-button></ax-clear-button>\n          </ax-datetime-box>\n        </div>\n      }\n    </div>\n  }\n} @else {\n  <!-- Standard form edit: single date/time value bound to entity or form field -->\n  <ax-datetime-box\n    #standardDateTimeBox\n    [ngModel]=\"getValue()\"\n    [picker]=\"format()\"\n    [depth]=\"inputDepth()\"\n    (onValueChanged)=\"handleValueChange($event)\"\n    [minValue]=\"minValue()\"\n    [maxValue]=\"maxValue()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [format]=\"calendarFormat()\"\n    [placeholder]=\"placeholder()\"\n  >\n    @for (validation of validationRules(); track validationTrackKey(validation, $index)) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"validationMessage(validation)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n    @if (clearButton()) {\n      <ax-clear-button></ax-clear-button>\n    }\n  </ax-datetime-box>\n}\n", styles: [":host.axp-format-time ::ng-deep .ax-icon-calendar:before,:host.axp-format-time ::ng-deep .ax-icon-calendar:after{content:none}:host.axp-format-time ::ng-deep .ax-icon-calendar{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.2l3.3 2-.8 1.3L11 13V7z'/%3E%3C/svg%3E\") center / contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "calendarLook", "yearRange", "boxLook", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4993,49 +5037,6 @@ var dateTimeBoxWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPDateTimeBoxWidgetViewComponent: AXPDateTimeBoxWidgetViewComponent
 });
 
-const AXPDateTimeBoxWidget = {
-    name: 'date-time-editor',
-    title: '@platform-layout-widgets:widgets.date-time-editor.title',
-    description: '@platform-layout-widgets:widgets.date-time-editor.description',
-    icon: 'fa-light fa-calendar',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
-    groups: [AXPWidgetGroupEnum.FormElement],
-    type: 'editor',
-    defaultFilterWidgetName: 'datetime-filter',
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        AXP_HAS_CLEAR_BUTTON_PROPERTY,
-        AXP_DATE_FORMAT_PROPERTY,
-        AXP_DATE_DEPTH_PROPERTY,
-        AXP_DATE_RANGE_LIMIT_PROPERTY,
-        AXP_READONLY_PROPERTY,
-        AXP_DISABLED_PROPERTY,
-        AXP_PLACEHOLDER_PROPERTY,
-        AXP_TRIGGERS_PROPERTY,
-        cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
-        //
-        AXP_REQUIRED_VALIDATION_PROPERTY,
-        AXP_LESS_THAN_VALIDATION_PROPERTY,
-        AXP_GREATER_THAN_VALIDATION_PROPERTY,
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetView_component; }).then((c) => c.AXPDateTimeBoxWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetEdit_component; }).then((c) => c.AXPDateTimeBoxWidgetEditComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetColumn_component; }).then((c) => c.AXPDateTimeBoxWidgetColumnComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return dateTimeBoxWidgetEdit_component; }).then((c) => c.AXPDateTimeBoxWidgetEditComponent),
-        },
-    },
-};
-
 class AXPEditorJsWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
@@ -5141,7 +5142,7 @@ class AXPEditorJsWidgetEditComponent extends AXPValueWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-editor>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXEditorComponent, selector: "ax-editor", inputs: ["look", "readonly", "disabled", "value", "modules", "imageConfig"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXEditorComponent, selector: "ax-editor", inputs: ["look", "readonly", "disabled", "value", "modules", "imageConfig"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEditorJsWidgetEditComponent, decorators: [{
             type: Component,
@@ -5288,7 +5289,7 @@ class AXPLargeTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLargeTextWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5420,7 +5421,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$1.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.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: 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.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -5495,7 +5496,7 @@ class AXPLargeTextWidgetPrintComponent extends AXPValueWidgetComponent {
     >
       {{ text || '—' }}
     </div>
-  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLargeTextWidgetPrintComponent, decorators: [{
             type: Component,
@@ -5527,7 +5528,7 @@ class AXPLargeTextWidgetViewComponent extends AXPValueWidgetComponent {
         <span class="text-muted">---</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLargeTextWidgetViewComponent, decorators: [{
             type: Component,
@@ -6058,7 +6059,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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6433,7 +6434,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-clear-button></ax-clear-button>
       }
     </ax-password-box>
-  `, 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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$4.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$3.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { 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: AXPPasswordBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6681,7 +6682,7 @@ class AXPProgressBarWidgetColumnComponent extends AXPColumnWidgetComponent {
         </ax-progress-bar>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$9.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$a.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPProgressBarWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6798,7 +6799,7 @@ class AXPProgressBarWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.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: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "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: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPProgressBarWidgetEditComponent, decorators: [{
             type: Component,
@@ -6919,7 +6920,7 @@ class AXPProgressBarWidgetViewComponent extends AXPValueWidgetComponent {
         </ax-progress-bar>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$9.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1$a.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPProgressBarWidgetViewComponent, decorators: [{
             type: Component,
@@ -7029,7 +7030,7 @@ class AXPRatePickerWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, 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: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRatePickerWidgetColumnComponent, decorators: [{
             type: Component,
@@ -7098,7 +7099,7 @@ class AXPRatePickerWidgetEditComponent extends AXPValueWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-rate-picker>
-  `, 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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRatePickerWidgetEditComponent, decorators: [{
             type: Component,
@@ -7158,7 +7159,7 @@ class AXPRatePickerWidgetViewComponent extends AXPValueWidgetComponent {
       [max]="max()"
       [title]="tooltipText()"
     ></ax-rate-picker>
-  `, 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: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: ["readonly", "disabled", "iconName", "color", "max", "step", "hasTransition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRatePickerWidgetViewComponent, decorators: [{
             type: Component,
@@ -7363,7 +7364,7 @@ class AXPRichTextWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRichTextWidgetColumnComponent, decorators: [{
             type: Component,
@@ -7587,7 +7588,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", "mode"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style", inputs: ["headingLevels", "buttons", "menuItems"] }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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.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: i3.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", "mode"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style", inputs: ["headingLevels", "buttons", "menuItems"] }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert", inputs: ["buttons"] }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list", inputs: ["buttons"] }, { 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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -7663,7 +7664,7 @@ class AXPRichTextWidgetPrintComponent extends AXPValueWidgetComponent {
     } @else {
       <div class="axp-widget-print-field axp-widget-print-field--empty">—</div>
     }
-  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRichTextWidgetPrintComponent, decorators: [{
             type: Component,
@@ -7756,7 +7757,7 @@ class AXPRichTextWidgetViewComponent extends AXPValueWidgetComponent {
         <span class="text-muted">---</span>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRichTextWidgetViewComponent, decorators: [{
             type: Component,
@@ -7990,7 +7991,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -8064,6 +8065,46 @@ function mapRowsToComboBoxItems(rows, valueField, textField, locale) {
 }
 //#endregion
 
+const AXP_SELECT_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPSelectBoxWidget = {
+    name: 'select-editor',
+    title: '@platform-layout-widgets:widgets.select-editor.title',
+    description: '@platform-layout-widgets:widgets.select-editor.description',
+    icon: 'fa-light fa-list-dropdown',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    defaultFilterWidgetName: 'select-filter',
+    type: 'editor',
+    properties: [
+        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        selectEditorDefaultValueProperty(),
+        AXP_ALLOW_MULTIPLE_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_PLACEHOLDER_PROPERTY,
+        AXP_HAS_CLEAR_BUTTON_PROPERTY,
+        AXP_ALLOW_SEARCH_PROPERTY,
+        AXP_TRIGGERS_PROPERTY,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return selectBoxWidgetView_component; }).then((c) => c.AXPSelectBoxWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return selectBoxWidgetEdit_component; }).then((c) => c.AXPSelectBoxWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return selectBoxWidgetColumn_component; }).then((c) => c.AXPSelectBoxWidgetColumnComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return selectBoxWidgetEdit_component; }).then((c) => c.AXPSelectBoxWidgetEditComponent),
+        },
+    },
+};
+
 //#region ----- Imports -----
 //#endregion
 //#region ----- Component -----
@@ -8437,7 +8478,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
                 value: newValue,
                 displayText: this.resolveFilterDisplayText(this.selectedItems()),
                 operation: {
-                    type: this.multiple() ? 'in' : 'equal',
+                    type: this.multiple() ? 'in' : AXP_SELECT_FILTER_DEFAULT_OPERATOR,
                 },
             });
         }
@@ -8700,7 +8741,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" }, classAttribute: "block flex-1" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: AXComboBoxComponent, descendants: true, isSignal: true }, { propertyName: "lookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showSelectBoxSkeleton()) {\n  <!-- ----- Loading indicator while registry data source resolves ----- -->\n  <ax-skeleton [animated]=\"true\" class=\"axp-select-box-skeleton\"></ax-skeleton>\n}\n<!-- ----- In-memory list rendered with combo-box ----- -->\n@else if (isArraySource()) {\n  <ax-combo-box\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [items]=\"comboItems()\"\n    [value]=\"comboValue()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [multiple]=\"multiple()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    (onValueChanged)=\"handleComboValueChange($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-combo-box>\n}\n<!-- ----- Registry or AXDataSource list rendered with lookup ----- -->\n@else if (editorKey()) {\n  <ax-lookup\n    [placeholder]=\"(placeholder() | translate | async) ?? ''\"\n    [caption]=\"(placeholder() | translate | async) ?? ''\"\n    [mode]=\"lookupMode()\"\n    [dataSource]=\"effectiveDataSource()\"\n    [valueField]=\"valueField()\"\n    [textField]=\"textField()\"\n    [value]=\"editorValue()\"\n    [valueItems]=\"selectedItems()\"\n    [disabled]=\"isSelectBoxDisabled()\"\n    [readonly]=\"readonly()\"\n    [searchable]=\"allowSearch()\"\n    [itemTemplate]=\"multiple() ? lookupItemTemplate : lookupDropDownListItemTemplate\"\n    [selectedTemplate]=\"lookupItemTemplate\"\n    (onValueChanged)=\"handleLookupValueChange($event)\"\n    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"], dependencies: [{ kind: "component", type: AXComboBoxComponent, selector: "ax-combo-box", inputs: ["name", "items", "searchable", "multiple", "adaptivityEnabled", "caption", "alternate", "placeholder", "searchPlaceholder", "highlightSearch", "emptyTemplate", "itemTemplate", "selectedTemplate", "disabled", "readonly", "look", "value"], outputs: ["lookChange", "valueChange", "onValueChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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$6.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.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    (onItemSelected)=\"handleLookupItemSelected($event)\"\n  >\n    <!--------------------------------------------------------------->\n    <!-- ----- Clear button ----- -->\n    @if (hasClearButton() && !filterMode()) {\n      <ax-clear-button></ax-clear-button>\n    }\n    @for (validation of validationRules(); track $index) {\n      <ax-validation-rule\n        [rule]=\"validation.rule\"\n        [message]=\"$safeNavigationMigration(validation.options?.message)\"\n        [options]=\"validation.options\"\n      ></ax-validation-rule>\n    }\n  </ax-lookup>\n}\n\n<!-- ----- Lookup item and selected-value label ----- -->\n<ng-template #lookupItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"ax-lookup-option-text\">\n    <ax-highlight-text\n      [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n      [query]=\"highlightText ?? ''\"\n    ></ax-highlight-text>\n  </span>\n</ng-template>\n<!-- ----- Drop-down-list rows: library skips .ax-lookup-option chrome when itemTemplate is set ----- -->\n<ng-template #lookupDropDownListItemTemplate let-item let-highlightText=\"highlightText\">\n  <span class=\"flex h-full w-full min-w-0 items-center px-3 text-sm\">\n    <span class=\"ax-lookup-option-text min-w-0 flex-1 truncate\">\n      <ax-highlight-text\n        [text]=\"(getLookupItemLabel(item) | translate | async) ?? ''\"\n        [query]=\"highlightText ?? ''\"\n      ></ax-highlight-text>\n    </span>\n  </span>\n</ng-template>\n", styles: [":host .axp-select-box-skeleton{display:block;width:100%;height:2.5rem;border-radius:var(--ax-sys-radius-md, .375rem)}\n"], dependencies: [{ kind: "component", type: AXComboBoxComponent, selector: "ax-combo-box", inputs: ["name", "items", "searchable", "multiple", "adaptivityEnabled", "caption", "alternate", "placeholder", "searchPlaceholder", "highlightSearch", "emptyTemplate", "itemTemplate", "selectedTemplate", "disabled", "readonly", "look", "value"], outputs: ["lookChange", "valueChange", "onValueChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3$5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -8760,7 +8801,7 @@ class AXPSelectBoxWidgetViewComponent extends AXPDataListWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -8788,45 +8829,6 @@ var selectBoxWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPSelectBoxWidgetViewComponent: AXPSelectBoxWidgetViewComponent
 });
 
-const AXPSelectBoxWidget = {
-    name: 'select-editor',
-    title: '@platform-layout-widgets:widgets.select-editor.title',
-    description: '@platform-layout-widgets:widgets.select-editor.description',
-    icon: 'fa-light fa-list-dropdown',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    subCategory: AXP_WIDGETS_EDITOR_SUB_CHOICE,
-    groups: [AXPWidgetGroupEnum.FormElement],
-    defaultFilterWidgetName: 'select-filter',
-    type: 'editor',
-    properties: [
-        AXP_DATA_SOURCE_OPTIONS_PROPERTY,
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        selectEditorDefaultValueProperty(),
-        AXP_ALLOW_MULTIPLE_PROPERTY,
-        AXP_DISABLED_PROPERTY,
-        AXP_READONLY_PROPERTY,
-        AXP_PLACEHOLDER_PROPERTY,
-        AXP_HAS_CLEAR_BUTTON_PROPERTY,
-        AXP_ALLOW_SEARCH_PROPERTY,
-        AXP_TRIGGERS_PROPERTY,
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return selectBoxWidgetView_component; }).then((c) => c.AXPSelectBoxWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return selectBoxWidgetEdit_component; }).then((c) => c.AXPSelectBoxWidgetEditComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return selectBoxWidgetColumn_component; }).then((c) => c.AXPSelectBoxWidgetColumnComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return selectBoxWidgetEdit_component; }).then((c) => c.AXPSelectBoxWidgetEditComponent),
-        },
-    },
-};
-
 //#region ----- Imports -----
 //#endregion
 //#region ----- Component -----
@@ -8900,7 +8902,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, decorators: [{
             type: Component,
@@ -8983,7 +8985,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", "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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -9103,7 +9105,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", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -9195,7 +9197,7 @@ class AXPSelectionListWidgetViewComponent extends AXPDataListWidgetComponent {
     } @empty {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSelectionListWidgetViewComponent, decorators: [{
             type: Component,
@@ -9361,7 +9363,7 @@ class AXPTagEditorWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTagEditorWidgetColumnComponent, decorators: [{
             type: Component,
@@ -9699,7 +9701,7 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$a.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$6.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { 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$1.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: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$b.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$6.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: 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: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTagEditorWidgetEditComponent, decorators: [{
             type: Component,
@@ -9843,7 +9845,7 @@ class AXPTagEditorWidgetViewComponent extends AXPValueWidgetComponent {
         <span class="text-muted">---</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXChipsModule }, { kind: "component", type: i1$b.AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXChipsModule }, { kind: "component", type: i1$c.AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTagEditorWidgetViewComponent, decorators: [{
             type: Component,
@@ -10095,7 +10097,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$1.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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: 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.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTemplateBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -10314,7 +10316,7 @@ class AXPTextBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTextBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -10458,7 +10460,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$1.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.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: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: 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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTextBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -10531,7 +10533,7 @@ class AXPTextBoxWidgetPrintComponent extends AXPValueWidgetComponent {
     <div class="axp-widget-print-field" [class.axp-widget-print-field--empty]="!text">
       {{ text || '—' }}
     </div>
-  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTextBoxWidgetPrintComponent, decorators: [{
             type: Component,
@@ -10560,7 +10562,7 @@ class AXPTextBoxWidgetViewComponent extends AXPValueWidgetComponent {
         <p class="text-muted">---</p>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTextBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -10699,7 +10701,7 @@ class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
@@ -10798,7 +10800,7 @@ class AXPToggleWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-label [textContent]="label() | translate | async"></ax-label>
       }
     </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: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
@@ -10864,7 +10866,7 @@ class AXPToggleWidgetPrintComponent extends AXPValueWidgetComponent {
       <span class="axp-widget-print-mark">{{ mark() }}</span>
       <span>{{ labelText() | translate | async }}</span>
     </div>
-  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".axp-widget-print-field{display:block;width:100%;min-height:1.5em;padding:2px 0 4px;border-bottom:1px solid #94a3b8;color:#111827;font-size:11pt;line-height:1.45;word-break:break-word}.axp-widget-print-field--empty{color:#94a3b8;border-bottom-style:dotted}.axp-widget-print-field--multiline{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:4.5em;white-space:pre-wrap}.axp-widget-print-field--rich{border:1px solid #94a3b8;border-radius:4px;padding:8px 10px;min-height:2.5em}.axp-widget-print-field--rich p{margin:0 0 .4em}.axp-widget-print-field--rich p:last-child{margin-bottom:0}.axp-widget-print-choice{display:inline-flex;align-items:center;gap:8px;font-size:11pt;color:#111827;line-height:1.4}.axp-widget-print-mark{font-size:14pt;line-height:1;font-family:Segoe UI Symbol,Noto Sans Symbols,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPToggleWidgetPrintComponent, decorators: [{
             type: Component,
@@ -10938,7 +10940,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
           <ax-icon class="fa-solid fa-xmark text-danger-500"> </ax-icon>
         }
       }
-    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -11741,6 +11743,72 @@ const AXPCodeEditorWidget = {
 };
 //#endregion
 
+//#region ----- Constants -----
+const COLUMN_FOOTER_LABEL_KEYS = {
+    sum: '@general:terms.common.column-footer.sum',
+    avg: '@general:terms.common.column-footer.average',
+    min: '@general:terms.common.column-footer.minimum',
+    max: '@general:terms.common.column-footer.maximum',
+    count: '@general:terms.common.column-footer.count',
+};
+//#endregion
+//#region ----- Component -----
+class AXPDataListColumnFooterComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.formatService = inject(AXFormatService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.state = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.loading = computed(() => this.state().loading, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.labelKey = computed(() => {
+            const footer = this.column().footer;
+            if (!footer) {
+                return '';
+            }
+            const custom = footer.title?.trim();
+            return custom || COLUMN_FOOTER_LABEL_KEYS[footer.operation];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => {
+            const footer = this.column().footer;
+            if (!footer) {
+                return '';
+            }
+            const value = this.state().values[this.column().name];
+            if (value == null || !Number.isFinite(value)) {
+                return '—';
+            }
+            return this.formatValue(value, footer.operation);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Formatting -----
+    formatValue(value, operation) {
+        const format = this.column().widget?.options?.['format'];
+        if (format?.name) {
+            return String(this.formatService.format(value, format.name, format.options));
+        }
+        if (operation === 'count' || Number.isInteger(value)) {
+            return String(value);
+        }
+        return String(Math.round(value * 100) / 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataListColumnFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataListColumnFooterComponent, isStandalone: true, selector: "axp-data-list-column-footer", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full min-w-0 items-center justify-end gap-1 truncate\" [attr.aria-busy]=\"loading()\">\n  @if (loading()) {\n    <!-- ----- Footer aggregate is still loading for the full filtered set ----- -->\n    <i class=\"fas fa-spinner-third animate-twSpin animate-infinite\" aria-hidden=\"true\"></i>\n  }\n  <!-- ----- Operation label and whole-table value ----- -->\n  @else {\n    <span class=\"font-medium\">{{ labelKey() | translate | async }}</span>\n    <span>{{ displayValue() }}</span>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataListColumnFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-data-list-column-footer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe], template: "<div class=\"flex w-full min-w-0 items-center justify-end gap-1 truncate\" [attr.aria-busy]=\"loading()\">\n  @if (loading()) {\n    <!-- ----- Footer aggregate is still loading for the full filtered set ----- -->\n    <i class=\"fas fa-spinner-third animate-twSpin animate-infinite\" aria-hidden=\"true\"></i>\n  }\n  <!-- ----- Operation label and whole-table value ----- -->\n  @else {\n    <span class=\"font-medium\">{{ labelKey() | translate | async }}</span>\n    <span>{{ displayValue() }}</span>\n  }\n</div>\n" }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
+
 /**
  * Prefix for row-level expression strings so widget-renderer does not evaluate them
  * (renderer only evaluates strings that look like {{ ... }}). Data-list evaluates
@@ -11842,6 +11910,14 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
         this.showFooter = computed(() => this.options()['showFooter'] ?? false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+        this.columnFooterState = computed(() => {
+            const source = this.options()['columnFooter'];
+            if (typeof source !== 'function') {
+                return { loading: false, values: {} };
+            }
+            return source();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFooterState" }] : /* istanbul ignore next */ []));
         this.fixHeader = computed(() => this.options()['fixHeader'] ?? true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fixHeader" }] : /* istanbul ignore next */ []));
         this.fixFooter = computed(() => this.options()['fixFooter'] ?? true, /* @ts-ignore */
@@ -12065,6 +12141,11 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
                 >
                   @for (grand of child.children ?? []; track grand.name) {
                     @if (!isDataListColumnBand(grand)) {
+                      <ng-template #grandFooterCell>
+                        @if (grand.footer) {
+                          <axp-data-list-column-footer [column]="grand" [state]="columnFooterState()" />
+                        }
+                      </ng-template>
                       <axp-widget-column-renderer
                         [expandHandler]="expandHandlerFor(grand)"
                         [caption]="grand.title || grand.name"
@@ -12072,11 +12153,17 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
                         [allowResizing]="columnAllowResizing(grand)"
                         [node]="getColumnNode(grand)"
                         [customWidth]="resolveColumnWidth(grand) ?? ''"
+                        [footerTemplate]="grandFooterCell"
                       />
                     }
                   }
                 </axp-widget-column-renderer>
               } @else {
+                <ng-template #childFooterCell>
+                  @if (child.footer) {
+                    <axp-data-list-column-footer [column]="child" [state]="columnFooterState()" />
+                  }
+                </ng-template>
                 <axp-widget-column-renderer
                   [expandHandler]="expandHandlerFor(child)"
                   [caption]="child.title || child.name"
@@ -12084,11 +12171,17 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
                   [allowResizing]="columnAllowResizing(child)"
                   [node]="getColumnNode(child)"
                   [customWidth]="resolveColumnWidth(child) ?? ''"
+                  [footerTemplate]="childFooterCell"
                 />
               }
             }
           </axp-widget-column-renderer>
         } @else {
+          <ng-template #colFooterCell>
+            @if (col.footer) {
+              <axp-data-list-column-footer [column]="col" [state]="columnFooterState()" />
+            }
+          </ng-template>
           <axp-widget-column-renderer
             [expandHandler]="expandHandlerFor(col)"
             [caption]="col.title || col.name"
@@ -12096,6 +12189,7 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
             [allowResizing]="columnAllowResizing(col)"
             [node]="getColumnNode(col)"
             [customWidth]="resolveColumnWidth(col) ?? ''"
+            [footerTemplate]="colFooterCell"
           />
         }
       }
@@ -12120,7 +12214,7 @@ class AXPDataListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ax-dropdown-command-column>
       }
     </ax-data-table>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$c.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$c.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$c.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i1$c.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$c.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$d.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$d.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$d.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i1$d.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$d.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPDataListColumnFooterComponent, selector: "axp-data-list-column-footer", inputs: ["column", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataListWidgetViewComponent, decorators: [{
             type: Component,
@@ -12176,6 +12270,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 >
                   @for (grand of child.children ?? []; track grand.name) {
                     @if (!isDataListColumnBand(grand)) {
+                      <ng-template #grandFooterCell>
+                        @if (grand.footer) {
+                          <axp-data-list-column-footer [column]="grand" [state]="columnFooterState()" />
+                        }
+                      </ng-template>
                       <axp-widget-column-renderer
                         [expandHandler]="expandHandlerFor(grand)"
                         [caption]="grand.title || grand.name"
@@ -12183,11 +12282,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         [allowResizing]="columnAllowResizing(grand)"
                         [node]="getColumnNode(grand)"
                         [customWidth]="resolveColumnWidth(grand) ?? ''"
+                        [footerTemplate]="grandFooterCell"
                       />
                     }
                   }
                 </axp-widget-column-renderer>
               } @else {
+                <ng-template #childFooterCell>
+                  @if (child.footer) {
+                    <axp-data-list-column-footer [column]="child" [state]="columnFooterState()" />
+                  }
+                </ng-template>
                 <axp-widget-column-renderer
                   [expandHandler]="expandHandlerFor(child)"
                   [caption]="child.title || child.name"
@@ -12195,11 +12300,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   [allowResizing]="columnAllowResizing(child)"
                   [node]="getColumnNode(child)"
                   [customWidth]="resolveColumnWidth(child) ?? ''"
+                  [footerTemplate]="childFooterCell"
                 />
               }
             }
           </axp-widget-column-renderer>
         } @else {
+          <ng-template #colFooterCell>
+            @if (col.footer) {
+              <axp-data-list-column-footer [column]="col" [state]="columnFooterState()" />
+            }
+          </ng-template>
           <axp-widget-column-renderer
             [expandHandler]="expandHandlerFor(col)"
             [caption]="col.title || col.name"
@@ -12207,6 +12318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             [allowResizing]="columnAllowResizing(col)"
             [node]="getColumnNode(col)"
             [customWidth]="resolveColumnWidth(col) ?? ''"
+            [footerTemplate]="colFooterCell"
           />
         }
       }
@@ -12233,7 +12345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </ax-data-table>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDataTableModule, AXPWidgetCoreModule, AXTranslationModule],
+                    imports: [AXDataTableModule, AXPWidgetCoreModule, AXTranslationModule, AXPDataListColumnFooterComponent],
                 }]
         }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
@@ -12627,7 +12739,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: "<!-- ----- 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.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: i3.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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerWidgetEditComponent, decorators: [{
             type: Component,
@@ -13887,7 +13999,7 @@ class AXPIntegrationConnectionsPanelWidgetEditComponent extends AXPValueWidgetCo
         this.providerBadges.set(resolved);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPIntegrationConnectionsPanelWidgetEditComponent, isStandalone: true, selector: "axp-integration-connections-panel-widget-edit", usesInheritance: true, ngImport: i0, template: "<!-- ----- Integration connections panel: loading state or provider cards ----- -->\n<div class=\"flex w-full flex-col gap-4\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while providers and connections are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Provider cards filtered by widget options (providerId, domainId) ----- -->\n  @else {\n    @for (provider of visibleProviders(); track provider.id) {\n      <section\n        class=\"flex flex-col gap-4 rounded-lg border border-surface bg-lighter-surface p-4\"\n      >\n        <div class=\"flex items-start justify-between gap-3\">\n          <!-- ----- Provider identity: logo/icon, title, description, and status badges ----- -->\n          <div class=\"flex min-w-0 items-center gap-3\">\n            @if (provider.logoKey) {\n              <axp-logo\n                [logoKey]=\"provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"24\"\n              />\n            }\n            <!-- ----- Fallback icon when no logo key is configured ----- -->\n            @else if (provider.icon) {\n              <ax-icon class=\"text-lg\">\n                <i [class]=\"provider.icon\"></i>\n              </ax-icon>\n            }\n\n            <div class=\"min-w-0\">\n              <!-- ----- Provider display name and connect-disabled warning badge ----- -->\n              <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                <span>{{ provider.displayName | translate | async }}</span>\n                <!--------------------------------------------------------------->\n                @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                  <span\n                    class=\"inline-flex cursor-help\"\n                    [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                    axTooltipPlacement=\"top\"\n                    [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                  >\n                    <ax-badge\n                      size=\"sm\"\n                      look=\"twotone\"\n                      color=\"warning\"\n                      [text]=\"(badgeKey | translate | async) ?? ''\"\n                    ></ax-badge>\n                  </span>\n                }\n              </div>\n\n              <!--------------------------------------------------------------->\n              <!-- ----- Optional provider description ----- -->\n              @if (provider.description) {\n                <div class=\"text-sm opacity-70\">\n                  {{ provider.description | translate | async }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- ----- Status badges and connect or manage actions ----- -->\n          <div class=\"flex shrink-0 flex-wrap items-center justify-end gap-2\">\n            @if (getProviderBadges(provider.id); as badges) {\n              <!--------------------------------------------------------------->\n              <!-- ----- Runtime connection settings badges (e.g. last sync) ----- -->\n              @if (badges.length > 0) {\n                <div class=\"flex flex-wrap items-center gap-1\">\n                  @for (badge of badges; track badge.text) {\n                    <ax-badge\n                      size=\"sm\"\n                      [look]=\"'twotone'\"\n                      [color]=\"badge.color\"\n                      [text]=\"badge.text\"\n                    ></ax-badge>\n                  }\n                </div>\n              }\n            }\n            @if (isProviderConnected(provider.id)) {\n              <!-- ----- Manage dropdown: reconfigure and disconnect ----- -->\n              <ax-dropdown-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                [mode]=\"'dropdown'\"\n                type=\"button\"\n                [disabled]=\"pendingAction()\"\n                [text]=\"(I18N + '.actions.manage' | translate | async) ?? ''\"\n              >\n                <ax-button-item-list>\n                  @if (supportsConnect(provider)) {\n                    <ax-button-item\n                      [text]=\"(I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                      [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                      (onClick)=\"handleConfigure(provider)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                  @for (action of getManageActions(provider); track action.commandKey) {\n                    <ax-button-item\n                      [text]=\"(action.titleKey | translate | async) ?? ''\"\n                      [color]=\"action.color\"\n                      [disabled]=\"pendingAction()\"\n                      (onClick)=\"handleManageAction(provider, action)\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"action.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                  }\n                  <ax-button-item\n                    [text]=\"(I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                    color=\"danger\"\n                    [disabled]=\"pendingAction()\"\n                    (onClick)=\"disconnect(provider.id)\"\n                  >\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              </ax-dropdown-button>\n            }\n            <!-- ----- Connect action when provider is not yet connected ----- -->\n            @else if (supportsConnect(provider)) {\n              <ax-button\n                size=\"sm\"\n                look=\"twotone\"\n                color=\"primary\"\n                type=\"button\"\n                [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                [text]=\"(I18N + '.actions.connect' | translate | async) ?? ''\"\n                (onClick)=\"handleConnect(provider)\"\n              >\n                <ax-suffix>\n                  <ax-icon icon=\"fa-light fa-arrow-up-right-from-square\"></ax-icon>\n                </ax-suffix>\n              </ax-button>\n            }\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "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: i3.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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIntegrationConnectionsPanelWidgetEditComponent, decorators: [{
             type: Component,
@@ -13942,7 +14054,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$d.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,
@@ -13999,7 +14111,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$d.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,
@@ -14235,7 +14347,7 @@ class AXPMapWidgetEditComponent extends AXPValueWidgetComponent {
       [readonly]="readonly()"
     >
     </ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$e.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,
@@ -14331,7 +14443,7 @@ class AXPMapWidgetViewComponent extends AXPValueWidgetComponent {
       [disabled]="disabled()"
       [readonly]="readonly()"
     ></ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$e.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,
@@ -14682,7 +14794,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.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$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i3.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$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -14791,7 +14903,7 @@ class AXPQrcodeWidgetViewComponent extends AXPValueWidgetComponent {
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$1.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
@@ -15188,7 +15300,7 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         return this.signatureProviders?.find((provider) => provider.name === name);
     }
     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=\"flex w-full flex-col overflow-hidden rounded-md\"\n    [class.border]=\"captureMode() === 'inline'\"\n    [class.border-surface]=\"captureMode() === 'inline'\"\n    [class.opacity-60]=\"disabled()\"\n  >\n  <div\n    class=\"relative w-full min-h-[9rem]\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"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\n  @if (showSignatureActions()) {\n    <!-- ----- Clear and saved-signature actions inside the signature box ----- -->\n    <div class=\"flex items-center justify-between gap-2 border-t border-surface px-1 py-2\" data-signature-action=\"true\">\n      <!--------------------------------------------------------------->\n      <!-- ----- Clear the inline pad ----- -->\n      @if (showInlineClear()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          data-signature-action=\"true\"\n          [text]=\"('@general:actions.clear.title' | translate | async) ?? ''\"\n          (onClick)=\"handleClearClick($event)\"\n        ></ax-button>\n      }\n      <!--------------------------------------------------------------->\n      <!-- ----- Apply the signature returned by the configured provider ----- -->\n      @if (showSavedSignatureAction()) {\n        <ax-button\n          look=\"twotone\"\n          color=\"primary\"\n          class=\"ax-sm ms-auto\"\n          data-signature-action=\"true\"\n          [text]=\"(savedSignatureLabel() | translate | async) ?? ''\"\n          (onClick)=\"applySavedSignature($event)\"\n        ></ax-button>\n      }\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>.ax-editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element:focus,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element:focus-visible{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: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPaintModule }, { kind: "component", type: i3$7.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i3$7.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i4$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.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=\"flex w-full flex-col overflow-hidden rounded-md\"\n    [class.border]=\"captureMode() === 'inline'\"\n    [class.border-surface]=\"captureMode() === 'inline'\"\n    [class.opacity-60]=\"disabled()\"\n  >\n  <div\n    class=\"relative w-full min-h-[9rem]\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"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\n  @if (showSignatureActions()) {\n    <!-- ----- Clear and saved-signature actions inside the signature box ----- -->\n    <div class=\"flex items-center justify-between gap-2 border-t border-surface px-1 py-2\" data-signature-action=\"true\">\n      <!--------------------------------------------------------------->\n      <!-- ----- Clear the inline pad ----- -->\n      @if (showInlineClear()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          data-signature-action=\"true\"\n          [text]=\"('@general:actions.clear.title' | translate | async) ?? ''\"\n          (onClick)=\"handleClearClick($event)\"\n        ></ax-button>\n      }\n      <!--------------------------------------------------------------->\n      <!-- ----- Apply the signature returned by the configured provider ----- -->\n      @if (showSavedSignatureAction()) {\n        <ax-button\n          look=\"twotone\"\n          color=\"primary\"\n          class=\"ax-sm ms-auto\"\n          data-signature-action=\"true\"\n          [text]=\"(savedSignatureLabel() | translate | async) ?? ''\"\n          (onClick)=\"applySavedSignature($event)\"\n        ></ax-button>\n      }\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>.ax-editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element:focus,:host ::ng-deep .axp-signature-pad-widget-edit canvas.ax-canvas-element:focus-visible{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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPaintModule }, { kind: "component", type: i3$6.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i3$6.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i4$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -15649,7 +15761,7 @@ class AXPStatusChipComponent {
         </div>
       </ax-popover>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStatusChipComponent, decorators: [{
             type: Component,
@@ -16820,7 +16932,7 @@ class AXPWidgetFieldConfiguratorWidgetColumnComponent extends AXPColumnWidgetCom
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetFieldConfiguratorWidgetColumnComponent, decorators: [{
             type: Component,
@@ -17606,7 +17718,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$f.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,
@@ -17862,7 +17974,7 @@ class AXPAdvancedGridWidgetViewComponent extends AXPValueWidgetComponent {
         justify-items-end justify-items-stretch
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$f.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "onRender", "isEmptyChange"] }, { kind: "component", type: i1$f.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,
@@ -18013,7 +18125,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$f.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,
@@ -18366,7 +18478,7 @@ class AXPFieldsetWidgetChromeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFieldsetWidgetChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFieldsetWidgetChromeComponent, isStandalone: true, selector: "axp-fieldset-widget-chrome", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@switch (look()) {\n  <!-- ----- Native fieldset look ----- -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"handleToggle()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      <!--->\n      <!-- ----- Fieldset body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- ----- Card look ----- -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"handleToggle()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n      <!--->\n      <!-- ----- Card body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </div>\n  }\n  <!-- ----- Group look ----- -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      <!--->\n      <!-- ----- Group body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- ----- Chrome-less container look ----- -->\n  @case ('container') {\n    <div class=\"container\">\n      <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n    </div>\n  }\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;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))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFieldsetWidgetChromeComponent, isStandalone: true, selector: "axp-fieldset-widget-chrome", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@switch (look()) {\n  <!-- ----- Native fieldset look ----- -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"handleToggle()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      <!--->\n      <!-- ----- Fieldset body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- ----- Card look ----- -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"handleToggle()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n      <!--->\n      <!-- ----- Card body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </div>\n  }\n  <!-- ----- Group look ----- -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      <!--->\n      <!-- ----- Group body when expanded ----- -->\n      @if (contentVisible()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- ----- Chrome-less container look ----- -->\n  @case ('container') {\n    <div class=\"container\">\n      <ng-container *ngTemplateOutlet=\"body()\"></ng-container>\n    </div>\n  }\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0px;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;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))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFieldsetWidgetChromeComponent, decorators: [{
             type: Component,
@@ -19101,7 +19213,7 @@ const AXPPageWidget = {
             component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-page-widget-designer.component-Cadl6guA.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-page-widget-designer.component-CcBk1zN_.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
         },
     },
 };
@@ -19148,7 +19260,7 @@ class AXPRepeaterWidgetDesignerComponent extends AXPValueWidgetComponent {
         >
           <ax-icon icon="fa-regular fa-xmark"></ax-icon>
         </ax-button>
-        <ax-button [text]="'Add New'" look="twotone" [disabled]="disabled()" class="col-start-10 col-end-13">
+        <ax-button [text]="('@layout-designer:components.repeater.add-new' | translate | async) ?? ''" look="twotone" [disabled]="disabled()" class="col-start-10 col-end-13">
           <ax-prefix>
             <ax-icon class="fa-solid fa-add"></ax-icon>
           </ax-prefix>
@@ -19171,7 +19283,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$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "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$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -19191,7 +19303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         >
           <ax-icon icon="fa-regular fa-xmark"></ax-icon>
         </ax-button>
-        <ax-button [text]="'Add New'" look="twotone" [disabled]="disabled()" class="col-start-10 col-end-13">
+        <ax-button [text]="('@layout-designer:components.repeater.add-new' | translate | async) ?? ''" look="twotone" [disabled]="disabled()" class="col-start-10 col-end-13">
           <ax-prefix>
             <ax-icon class="fa-solid fa-add"></ax-icon>
           </ax-prefix>
@@ -19223,6 +19335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPWidgetCoreModule,
                         AXPWidgetDesignerRendererDirective,
                         AXPDesignerAddWidgetMiniButtonComponent,
+                        AXTranslationModule,
                     ],
                     providers: [
                         {
@@ -19453,7 +19566,7 @@ const AXPRepeaterWidget = {
             component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
         },
         column: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-MHOUqz2l.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-BiGUrkFi.mjs').then((c) => c.AXPRepeaterWidgetColumnComponent),
         },
     },
 };
@@ -19547,7 +19660,7 @@ class AXPStepWizardWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent
                 provide: AXPLayoutBaseWidgetComponent,
                 useExisting: AXPStepWizardWidgetDesignerComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (steps().length) {\n  <!-- ----- Step headers and the active step body ----- -->\n  <div class=\"w-full\">\n    <ax-step-wizard\n      class=\"mb-4 flex\"\n      [look]=\"definition().look || 'circular'\"\n      [changeStep]=\"true\"\n      (stepChanged)=\"handleStepChanged($event)\"\n    >\n      @for (step of steps(); track step.id; let stepIndex = $index) {\n        <ax-step-wizard-item\n          [step]=\"stepIndex + 1\"\n          [label]=\"(step.title | translate | async) ?? step.title\"\n          [description]=\"step.description ? ((step.description | translate | async) ?? step.description) : ''\"\n          [id]=\"step.id\"\n        >\n          @if (step.icon) {\n            <ax-icon [class]=\"step.icon\"></ax-icon>\n          }\n        </ax-step-wizard-item>\n      }\n    </ax-step-wizard>\n    @if (activeStep()?.content; as content) {\n      <!--->\n      <!-- ----- Design the active step body ----- -->\n      <ng-container\n        axp-widget-designer-renderer\n        [node]=\"content\"\n        [parentNode]=\"this\"\n        [mode]=\"mode\"\n        [locked]=\"locked\"\n      ></ng-container>\n    }\n    <axp-designer-add-widget-line-button\n      class=\"mt-4\"\n      [text]=\"('@platform-layout-widgets:widgets.step-wizard.designer.add-step' | translate | async) ?? ''\"\n      (onClick)=\"handleAddStep()\"\n    ></axp-designer-add-widget-line-button>\n  </div>\n}\n<!-- ----- Empty wizard: add the first step ----- -->\n@else {\n  <axp-designer-add-widget-line-button\n    [text]=\"('@platform-layout-widgets:widgets.step-wizard.designer.add-step' | translate | async) ?? ''\"\n    (onClick)=\"handleAddStep()\"\n  ></axp-designer-add-widget-line-button>\n}\n", dependencies: [{ kind: "ngmodule", type: AXStepWizardModule }, { kind: "component", type: i1$g.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "look", "changeStep", "orientation", "content"], outputs: ["stepChanged"] }, { kind: "component", type: i1$g.AXStepWizardItemComponent, selector: "ax-step-wizard-item", inputs: ["disabled", "color", "step", "label", "description", "customTemplate", "active", "passed", "look", "state", "id"], outputs: ["activeChange", "passedChange", "lookChange", "stateChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetLineButtonComponent, selector: "axp-designer-add-widget-line-button", inputs: ["text"], outputs: ["onClick"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (steps().length) {\n  <!-- ----- Step headers and the active step body ----- -->\n  <div class=\"w-full\">\n    <ax-step-wizard\n      class=\"mb-4 flex\"\n      [look]=\"definition().look || 'circular'\"\n      [changeStep]=\"true\"\n      (stepChanged)=\"handleStepChanged($event)\"\n    >\n      @for (step of steps(); track step.id; let stepIndex = $index) {\n        <ax-step-wizard-item\n          [step]=\"stepIndex + 1\"\n          [label]=\"(step.title | translate | async) ?? step.title\"\n          [description]=\"step.description ? ((step.description | translate | async) ?? step.description) : ''\"\n          [id]=\"step.id\"\n        >\n          @if (step.icon) {\n            <ax-icon [class]=\"step.icon\"></ax-icon>\n          }\n        </ax-step-wizard-item>\n      }\n    </ax-step-wizard>\n    @if (activeStep()?.content; as content) {\n      <!--->\n      <!-- ----- Design the active step body ----- -->\n      <ng-container\n        axp-widget-designer-renderer\n        [node]=\"content\"\n        [parentNode]=\"this\"\n        [mode]=\"mode\"\n        [locked]=\"locked\"\n      ></ng-container>\n    }\n    <axp-designer-add-widget-line-button\n      class=\"mt-4\"\n      [text]=\"('@platform-layout-widgets:widgets.step-wizard.designer.add-step' | translate | async) ?? ''\"\n      (onClick)=\"handleAddStep()\"\n    ></axp-designer-add-widget-line-button>\n  </div>\n}\n<!-- ----- Empty wizard: add the first step ----- -->\n@else {\n  <axp-designer-add-widget-line-button\n    [text]=\"('@platform-layout-widgets:widgets.step-wizard.designer.add-step' | translate | async) ?? ''\"\n    (onClick)=\"handleAddStep()\"\n  ></axp-designer-add-widget-line-button>\n}\n", dependencies: [{ kind: "ngmodule", type: AXStepWizardModule }, { kind: "component", type: i1$h.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetLineButtonComponent, selector: "axp-designer-add-widget-line-button", inputs: ["text"], outputs: ["onClick"] }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStepWizardWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -19880,7 +19993,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$g.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "look", "changeStep", "orientation", "content"], outputs: ["stepChanged"] }, { kind: "component", type: i1$g.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$g.AXStepWizardContentDirective, selector: "[axStepWizardContent]", inputs: ["axStepWizardContent"], exportAs: ["axStepWizardContent"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "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$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i3.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", "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.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$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStepWizardWidgetViewComponent, decorators: [{
             type: Component,
@@ -21994,7 +22107,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$h.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$h.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.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$5.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button\n  color=\"primary\"\n  [text]=\"('@layout-designer:property-editor.layout-profile.reset' | translate | async) ?? ''\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.grid' | translate | async }}</span>\n  <div class=\"flex items-center justify-between gap-1\">\n    <span class=\"text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <span class=\"text-xs\">{{ '@layout-designer:property-editor.flex-grid.column' | translate | async }}</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of gridSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      @if (hoveredJustify() && hoveredAlign()) {\n        <div\n          class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n              @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              } @else if (clickedJustify() === 'stretch') {\n                <svg\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'stretch') {\n                <svg\n                  width=\"20\"\n                  height=\"60\"\n                  viewBox=\"0 0 20 60\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else {\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: #efeaea\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                    class=\"hover:fill-opacity-20\"\n                  ></path>\n                </svg>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 60 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n                <path\n                  d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n                <path\n                  d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n              </svg>\n            } @else if (clickedJustify() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"20\"\n                viewBox=\"0 0 60 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg\n                width=\"20\"\n                height=\"60\"\n                viewBox=\"0 0 20 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else {\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: #efeaea\"\n              >\n                <path\n                  d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill: #cebcbc; fill-opacity: 0.16\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n            fill=\"currentColor\"\n          ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setGap($event ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'single') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -22009,7 +22122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXRangeSliderModule,
                         AXSelectionListModule,
                         FormsModule,
-                    ], 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"] }]
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], template: "<div class=\"axp-grid-breakpoints pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button\n  color=\"primary\"\n  [text]=\"('@layout-designer:property-editor.layout-profile.reset' | translate | async) ?? ''\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></ax-button>\n\n<div class=\"axp-grid-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.grid' | translate | async }}</span>\n  <div class=\"flex items-center justify-between gap-1\">\n    <span class=\"text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <span class=\"text-xs\">{{ '@layout-designer:property-editor.flex-grid.column' | translate | async }}</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm max-w-12\"\n    ></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of gridSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      @if (hoveredJustify() && hoveredAlign()) {\n        <div\n          class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n              @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              } @else if (clickedJustify() === 'stretch') {\n                <svg\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'stretch') {\n                <svg\n                  width=\"20\"\n                  height=\"60\"\n                  viewBox=\"0 0 20 60\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: white\"\n                >\n                  <path\n                    d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n                  ></path>\n                </svg>\n              } @else {\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style=\"color: #efeaea\"\n                >\n                  <path\n                    d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                    class=\"hover:fill-opacity-20\"\n                  ></path>\n                </svg>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if (clickedJustify() === 'stretch' && clickedAlign() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 60 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n                <path\n                  d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n                <path\n                  d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                  fill=\"currentColor\"\n                  style=\"fill-opacity: 0.25\"\n                ></path>\n              </svg>\n            } @else if (clickedJustify() === 'stretch') {\n              <svg\n                width=\"60\"\n                height=\"20\"\n                viewBox=\"0 0 60 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg\n                width=\"20\"\n                height=\"60\"\n                viewBox=\"0 0 20 60\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: white\"\n              >\n                <path\n                  d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill-opacity: 0.16; stroke: white\"\n                ></path>\n              </svg>\n            } @else {\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style=\"color: #efeaea\"\n              >\n                <path\n                  d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  style=\"fill: #cebcbc; fill-opacity: 0.16\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-24\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n            fill=\"currentColor\"\n          ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setGap($event ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'single') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: ["axp-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var gridOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -22174,7 +22289,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", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid w-11/12\">\n  <div class=\"grid grid-cols-2 grid-rows-2 gap-x-3 items-center pb-2\">\n    <span>Columns</span>\n    <span>Items</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"changeValue($event, 'columns')\"\n    ></ax-number-box>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"99\"\n      [value]=\"items()\"\n      (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n    ></ax-number-box>\n  </div>\n  <span>Align</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"grid place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div\n        class=\"axp-grid-option-hover absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg\n              width=\"60\"\n              height=\"60\"\n              viewBox=\"0 0 60 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n              <path\n                d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill: #cebcbc; fill-opacity: 0.16\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n      <span>Y:</span>\n      <div class=\"w-36\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          placeholder=\"Choose...\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "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,
@@ -22188,8 +22303,8 @@ var advancedGridOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
 
 const AXPAdvancedGridOptionsWidget = {
     name: 'advanced-grid-options',
-    title: 'Advanced Grid Options',
-    description: 'options of Advanced Grid',
+    title: '@layout-designer:property-editor.widgets.advanced-grid-options.title',
+    description: '@layout-designer:property-editor.widgets.advanced-grid-options.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
     icon: 'fa-light fa-th',
     type: 'editor',
@@ -22619,7 +22734,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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$5.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$h.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$h.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$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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", "selected", "color", "look", "type", "mode", "iconOnly"], 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,
@@ -22643,8 +22758,8 @@ var borderWidgetEditor_component = /*#__PURE__*/Object.freeze({
 
 const AXPBorderWidget = {
     name: 'border',
-    title: 'Box Border',
-    description: 'Editing Elements Border',
+    title: '@layout-designer:property-editor.widgets.border.title',
+    description: '@layout-designer:property-editor.widgets.border.description',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
     icon: 'fa-light fa-border',
     type: 'editor',
@@ -23205,7 +23320,7 @@ class AXPDataSourceOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     //#region ----- Lifecycle -----
     #init;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options flex flex-col gap-3 py-2\">\n  <!-- ----- Mode: exists or list ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.source | translate | async }}</span>\n    <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n      (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n      valueField=\"value\" textField=\"text\" />\n  </div>\n\n  <!-- ----- Select registered query (only when mode is exists) ----- -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"queriesDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onQueryChange($event)\" valueField=\"name\" textField=\"title\"\n      [searchable]=\"true\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n\n  <!-- ----- Form-local named list (designer store) ----- -->\n  @if (dataSourceMode() === 'local') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <div class=\"flex items-center gap-2\">\n      <ax-lookup\n        class=\"flex-1\"\n        mode=\"drop-down-list\"\n        [dataSource]=\"localSourcesDataSource()\"\n        [ngModel]=\"selectedLocalId()\"\n        (onValueChanged)=\"onLocalSourceChange($event)\"\n        valueField=\"id\"\n        textField=\"name\"\n        [searchable]=\"true\"\n        [placeholder]=\"(I18N.localPlaceholder | translate | async) ?? ''\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n      <ax-button\n        look=\"blank\"\n        class=\"ax-sm\"\n        [title]=\"(I18N.addLocal | translate | async) ?? ''\"\n        (onClick)=\"handleCreateLocal()\"\n      >\n        <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n      </ax-button>\n      <!--->\n      <!-- ----- Edit the selected local list ----- -->\n      @if (selectedLocalId()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          [title]=\"(I18N.editLocal | translate | async) ?? ''\"\n          (onClick)=\"handleEditLocal()\"\n        >\n          <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- ----- Simple list (text rows) when no local store ----- -->\n  @if (dataSourceMode() === 'list') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.listItems | translate | async }}</span>\n    <axp-repeater-rows-layout\n      [count]=\"listEntries().length\"\n      [rowTemplate]=\"listRowTpl\"\n      [hasControls]=\"true\"\n      [allowReorder]=\"true\"\n      [addItemLabelKey]=\"I18N.addListItem\"\n      (addClick)=\"addListEntry()\"\n      (removeClick)=\"removeListEntry($event)\"\n      (drop)=\"onListDrop($event)\"\n    ></axp-repeater-rows-layout>\n    <ng-template #listRowTpl let-index=\"index\">\n      <ax-text-box\n        class=\"w-full\"\n        [ngModel]=\"listEntries()[index]\"\n        (onValueChanged)=\"onListEntryChange(index, $event)\"\n      />\n    </ng-template>\n  </div>\n  }\n\n  <!-- ----- valueField / textField (exists only) ----- -->\n  @if (fieldSelectsKey() && (dataSourceMode() === 'exists' || dataSourceMode() === 'local')) {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n\n  <!-- ----- textField select ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n</div>\n", styles: [".axp-data-source-options{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$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: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options flex flex-col gap-3 py-2\">\n  <!-- ----- Mode: exists or list ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.source | translate | async }}</span>\n    <ax-selection-list [items]=\"modeItems()\" [ngModel]=\"dataSourceMode()\"\n      (onValueChanged)=\"setDataSourceMode($event.value)\" direction=\"horizontal\" [multiple]=\"false\" [showControl]=\"true\"\n      valueField=\"value\" textField=\"text\" />\n  </div>\n\n  <!-- ----- Select registered query (only when mode is exists) ----- -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"queriesDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onQueryChange($event)\" valueField=\"name\" textField=\"title\"\n      [searchable]=\"true\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n\n  <!-- ----- Form-local named list (designer store) ----- -->\n  @if (dataSourceMode() === 'local') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <div class=\"flex items-center gap-2\">\n      <ax-lookup\n        class=\"flex-1\"\n        mode=\"drop-down-list\"\n        [dataSource]=\"localSourcesDataSource()\"\n        [ngModel]=\"selectedLocalId()\"\n        (onValueChanged)=\"onLocalSourceChange($event)\"\n        valueField=\"id\"\n        textField=\"name\"\n        [searchable]=\"true\"\n        [placeholder]=\"(I18N.localPlaceholder | translate | async) ?? ''\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n      <ax-button\n        look=\"blank\"\n        class=\"ax-sm\"\n        [title]=\"(I18N.addLocal | translate | async) ?? ''\"\n        (onClick)=\"handleCreateLocal()\"\n      >\n        <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n      </ax-button>\n      <!--->\n      <!-- ----- Edit the selected local list ----- -->\n      @if (selectedLocalId()) {\n        <ax-button\n          look=\"blank\"\n          class=\"ax-sm\"\n          [title]=\"(I18N.editLocal | translate | async) ?? ''\"\n          (onClick)=\"handleEditLocal()\"\n        >\n          <ax-icon class=\"fa-light fa-pen\"></ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- ----- Simple list (text rows) when no local store ----- -->\n  @if (dataSourceMode() === 'list') {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.listItems | translate | async }}</span>\n    <axp-repeater-rows-layout\n      [count]=\"listEntries().length\"\n      [rowTemplate]=\"listRowTpl\"\n      [hasControls]=\"true\"\n      [allowReorder]=\"true\"\n      [addItemLabelKey]=\"I18N.addListItem\"\n      (addClick)=\"addListEntry()\"\n      (removeClick)=\"removeListEntry($event)\"\n      (drop)=\"onListDrop($event)\"\n    ></axp-repeater-rows-layout>\n    <ng-template #listRowTpl let-index=\"index\">\n      <ax-text-box\n        class=\"w-full\"\n        [ngModel]=\"listEntries()[index]\"\n        (onValueChanged)=\"onListEntryChange(index, $event)\"\n      />\n    </ng-template>\n  </div>\n  }\n\n  <!-- ----- valueField / textField (exists only) ----- -->\n  @if (fieldSelectsKey() && (dataSourceMode() === 'exists' || dataSourceMode() === 'local')) {\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n\n  <!-- ----- textField select ----- -->\n  <div class=\"flex flex-col gap-2\">\n    <span class=\"font-medium text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-lookup mode=\"drop-down-list\" [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [searchable]=\"false\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-lookup>\n  </div>\n  }\n</div>\n", styles: [".axp-data-source-options{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXPRepeaterRowsLayoutComponent, selector: "axp-repeater-rows-layout", inputs: ["count", "disabled", "hasControls", "allowReorder", "rowTemplate", "addItemLabelKey", "emptyTitleKey", "emptyDescriptionKey", "addFirstItemLabelKey"], outputs: ["addClick", "removeClick", "drop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -23332,7 +23447,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", "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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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,
@@ -23363,12 +23478,12 @@ class AXPFlexItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.alignOptions = [
-            { value: 'auto', label: 'Auto' },
-            { value: 'flex-start', label: 'Start' },
-            { value: 'flex-end', label: 'End' },
-            { value: 'center', label: 'Center' },
-            { value: 'baseline', label: 'Baseline' },
-            { value: 'stretch', label: 'Stretch' },
+            { value: 'auto', label: '@layout-designer:property-editor.flex-item.align-auto' },
+            { value: 'flex-start', label: '@layout-designer:property-editor.flex-item.align-start' },
+            { value: 'flex-end', label: '@layout-designer:property-editor.flex-item.align-end' },
+            { value: 'center', label: '@layout-designer:property-editor.flex-item.align-center' },
+            { value: 'baseline', label: '@layout-designer:property-editor.flex-item.align-baseline' },
+            { value: 'stretch', label: '@layout-designer:property-editor.flex-item.align-stretch' },
         ];
     }
     save(key, val) {
@@ -23378,7 +23493,7 @@ class AXPFlexItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPFlexItemOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-item-options-widget-editor", usesInheritance: true, ngImport: i0, template: `
     <div class="grid grid-cols-2 gap-3 items-start">
       <div class="flex flex-col gap-1">
-        <span>Order</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.order' | translate | async }}</span>
         <ax-number-box
           [minValue]="-999"
           [maxValue]="999"
@@ -23388,7 +23503,7 @@ class AXPFlexItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Grow</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.grow' | translate | async }}</span>
         <ax-number-box
           [minValue]="0"
           [maxValue]="999"
@@ -23398,7 +23513,7 @@ class AXPFlexItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Shrink</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.shrink' | translate | async }}</span>
         <ax-number-box
           [minValue]="0"
           [maxValue]="999"
@@ -23408,15 +23523,15 @@ class AXPFlexItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Basis</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.basis' | translate | async }}</span>
         <ax-text-box
           [ngModel]="$safeNavigationMigration(getValue()?.basis)"
           (onValueChanged)="save('basis', $event.value)"
-          placeholder="e.g. auto, 0, 200px, 30%"
+          [placeholder]="('@layout-designer:property-editor.flex-item.basis-placeholder' | translate | async) ?? ''"
         ></ax-text-box>
       </div>
     </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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFlexItemOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -23425,7 +23540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     template: `
     <div class="grid grid-cols-2 gap-3 items-start">
       <div class="flex flex-col gap-1">
-        <span>Order</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.order' | translate | async }}</span>
         <ax-number-box
           [minValue]="-999"
           [maxValue]="999"
@@ -23435,7 +23550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Grow</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.grow' | translate | async }}</span>
         <ax-number-box
           [minValue]="0"
           [maxValue]="999"
@@ -23445,7 +23560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Shrink</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.shrink' | translate | async }}</span>
         <ax-number-box
           [minValue]="0"
           [maxValue]="999"
@@ -23455,17 +23570,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
 
       <div class="flex flex-col gap-1">
-        <span>Basis</span>
+        <span>{{ '@layout-designer:property-editor.flex-item.basis' | translate | async }}</span>
         <ax-text-box
           [ngModel]="$safeNavigationMigration(getValue()?.basis)"
           (onValueChanged)="save('basis', $event.value)"
-          placeholder="e.g. auto, 0, 200px, 30%"
+          [placeholder]="('@layout-designer:property-editor.flex-item.basis-placeholder' | translate | async) ?? ''"
         ></ax-text-box>
       </div>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXNumberBoxModule, AXTextBoxModule, FormsModule],
+                    imports: [AXNumberBoxModule, AXTextBoxModule, FormsModule, AXTranslationModule, AsyncPipe],
                 }]
         }] });
 
@@ -23782,7 +23897,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$h.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$h.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$5.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.wrap' | translate | async }}</span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of flexSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (hoveredJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (clickedJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg\n                  data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- removed legacy ax-select-box align/justify picker -->\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span class=\"order-3\">Y:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"w-32\"\n        [ngModel]=\"gap().both\"\n        (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().both\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'both') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$i.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$i.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -23796,7 +23911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXButtonModule,
                         AXSelectionListModule,
                         FormsModule,
-                    ], 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"] }]
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center justify-items-start\">\n  <span>{{ '@layout-designer:property-editor.flex-grid.direction' | translate | async }}</span>\n  <div>\n    <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.wrap' | translate | async }}</span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>{{ '@layout-designer:property-editor.flex-grid.align' | translate | async }}</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 grid-rows-3\">\n        @for (side of flexSides; track side.value) {\n          <div\n            [attr.aria-label]=\"side.label\"\n            [attr.aria-value]=\"side.value\"\n            class=\"grid place-content-center\"\n            (mouseenter)=\"onHover(side)\"\n            (mouseleave)=\"onHoverLeave()\"\n            (click)=\"onClick(side)\"\n          >\n            @if (true) {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              </svg>\n            }\n          </div>\n        }\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (hoveredJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            } @else if (hoveredAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                  fill-opacity=\"0.3\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\n            @if (clickedJustify() === 'space-between') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n                <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else if (clickedAlign() === 'baseline') {\n                <svg\n                  data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n                  width=\"60\"\n                  height=\"20\"\n                  viewBox=\"0 0 60 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                  <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n                </svg>\n              } @else {\n                <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                    fill=\"currentColor\"\n                  ></path>\n                </svg>\n              }\n            } @else if (clickedAlign() === 'flex-start') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'center') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'flex-end') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'stretch') {\n              <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            } @else if (clickedAlign() === 'baseline') {\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                  fill=\"currentColor\"\n                ></path>\n                <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- removed legacy ax-select-box align/justify picker -->\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n      <span class=\"order-3\">Y:</span>\n      <div class=\"max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-lookup\n          mode=\"drop-down-list\"\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          [searchable]=\"false\"\n          [placeholder]=\"('@general:terms.common.choose-placeholder' | translate | async) ?? ''\"\n        >\n        </ax-lookup>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"w-32\"\n        [ngModel]=\"gap().both\"\n        (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().both\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"text-xs\"\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if (gapMode() === 'both') {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n            fill=\"currentColor\"\n          ></path>\n        } @else {\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n            fill=\"currentColor\"\n          ></path>\n        }\n      </svg>\n    </button>\n  </div>\n  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var flexOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -23908,7 +24025,7 @@ class AXPGridItemOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-number-box>
       </div>
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridItemOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -24220,7 +24337,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         this.setValue({ ...bag, [key]: diff });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$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: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>{{ '@layout-designer:property-editor.layout-profile.reset' | translate | async }}</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -24238,7 +24355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXNumberBoxModule,
                         AXDecoratorModule,
                         AXTranslationModule,
-                    ], template: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (canResetProfile()) {\n  <div class=\"flex justify-end px-1\">\n    <ax-button\n      class=\"ax-sm\"\n      look=\"blank\"\n      [iconOnly]=\"true\"\n      [title]=\"'@layout-designer:property-editor.layout-profile.reset' | translate | async\"\n      (onClick)=\"resetProfile()\"\n    >\n      <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n    </ax-button>\n  </div>\n}\n<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>{{ '@layout-designer:property-editor.layout-profile.reset' | translate | async }}</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }] } });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -24383,7 +24500,7 @@ class AXPBaseValidationComponent {
     </div>
     <ng-content></ng-content>
     <div #el class="h-[1px]"></div>
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBaseValidationComponent, decorators: [{
             type: Component,
@@ -24485,7 +24602,7 @@ class AXPBetweenValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </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: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: 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 }); }
+  </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: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBetweenValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -24600,7 +24717,7 @@ class AXPCallbackValidationWidgetEditComponent extends AXPValueWidgetComponent {
         ax
       </div>
     </div>
-  </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: 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: AXTextBoxModule }, { 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 }); }
+  </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: 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: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCallbackValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -24694,7 +24811,7 @@ class AXPEqualValidationWidgetEditComponent extends AXPValueWidgetComponent {
         ></ax-text-box>
       </div>
     </div>
-  </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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEqualValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -24794,7 +24911,7 @@ class AXPGreaterThanValidationWidgetEditComponent extends AXPValueWidgetComponen
         </div>
       </div>
     </div>
-  </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: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGreaterThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -24906,7 +25023,7 @@ class AXPLessThanValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </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: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLessThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25011,7 +25128,7 @@ class AXPMaxLengthValidationWidgetEditComponent extends AXPValueWidgetComponent
         ></ax-number-box>
       </div>
     </div>
-  </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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMaxLengthValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25104,7 +25221,7 @@ class AXPMinLengthValidationWidgetEditComponent extends AXPValueWidgetComponent
         ></ax-number-box>
       </div>
     </div>
-  </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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMinLengthValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25197,7 +25314,7 @@ class AXPRegularExpressionValidationWidgetEditComponent extends AXPValueWidgetCo
         ></ax-text-box>
       </div>
     </div>
-  </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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </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: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRegularExpressionValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -25779,7 +25896,7 @@ class AXPCronExpressionEditorComponent {
         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: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: 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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCronExpressionEditorComponent, decorators: [{
             type: Component,
@@ -27657,9 +27774,14 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         if (!Array.isArray(filters)) {
             return;
         }
-        this.initialFilters.set(filters);
-        this.currentFilterQueries.set(filters);
-        this.previousFilterQueries.set(filters);
+        const view = this.selectedQueryView();
+        const next = view ? withQueryViewFilterVisibility(view, filters) : filters;
+        this.initialFilters.set(next);
+        this.currentFilterQueries.set(next);
+        this.previousFilterQueries.set(next);
+        if (!isEqual(filters, next)) {
+            this.setValue({ ...this.getValue(), filters: next });
+        }
     }
     async loadSettings() {
         const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
@@ -27708,7 +27830,11 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         if (!nextView) {
             return;
         }
-        const filters = mergeHiddenFiltersWithViewConditions(this.getValue()?.filters, nextView);
+        const previousName = this.getValue()?.view;
+        const previousView = previousName
+            ? this.queryViews().find((item) => item.name === previousName)
+            : undefined;
+        const filters = withQueryViewFilterVisibility(nextView, mergeHiddenFiltersWithViewConditions(this.getValue()?.filters, nextView, previousView));
         const columns = applyQueryViewToColumnQueries(this.columnDefinitions(), nextView);
         const sorts = nextView.sorts ?? [];
         this.initialFilters.set(filters);
@@ -27813,16 +27939,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }));
     }
     applySavedQueryView(view, sourceView) {
-        const currentFilters = this.liveFilterQueries();
-        const sourceFields = new Set((sourceView.conditions ?? []).map((condition) => condition.name));
-        const hiddenScope = (currentFilters ?? []).filter((filter) => {
-            if (filter.hidden !== true) {
-                return false;
-            }
-            const field = resolveFilterQueryIdentityField(filter) ?? filter.field ?? '';
-            return !sourceFields.has(field);
-        });
-        const filters = [...hiddenScope, ...queryViewConditionsToFilterQueries(view)];
+        const filters = withQueryViewFilterVisibility(view, mergeHiddenFiltersWithViewConditions(this.liveFilterQueries(), view, sourceView));
         const columns = applyQueryViewToColumnQueries(this.columnDefinitions(), view);
         const sorts = view.sorts ?? [];
         this.initialFilters.set(filters);
@@ -27905,7 +28022,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n  @if (showViews()) {\n    <!-- ----- Query view tabs and custom-view actions ----- -->\n    <axp-query-view-tabs\n      class=\"w-full\"\n      [views]=\"viewQueries()\"\n      [selectedView]=\"selectedViewQuery()\"\n      (selectedViewChange)=\"onViewChanged($event)\"\n      (edit)=\"onEditQueryView($event)\"\n      (remove)=\"onDeleteQueryView($event)\"\n    ></axp-query-view-tabs>\n  }\n  @if (showFilterToolbarRow()) {\n    <!-- ----- Filter, sort, and view presentation controls ----- -->\n    <div class=\"axp-list-toolbar__row flex min-w-0 flex-wrap items-center gap-2 overflow-hidden border-b border-light w-full\">\n      @if (canFilter()) {\n        <axp-query-filters\n          class=\"min-w-0 flex-1\"\n          [filtersDefinitions]=\"filterDefinitions()\"\n          [initialFilters]=\"initialFilters()\"\n          [mode]=\"filterMode()\"\n          (onFiltersChanged)=\"onFiltersChanged($event)\"\n        ></axp-query-filters>\n      }\n      <div class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\">\n        <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n        @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n          <ax-button\n            [title]=\"'@general:actions.apply.title'\"\n            [iconOnly]=\"true\"\n            [color]=\"'primary'\"\n            (onClick)=\"applyFilters()\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n        <!-- ----- Save View appears when the list layout is dirty ----- -->\n        <axp-query-view-save-button\n          [visible]=\"canSaveQueryView()\"\n          (save)=\"onSaveQueryView()\"\n        ></axp-query-view-save-button>\n\n        <!-- ----- Sort opens the existing sort panel directly ----- -->\n        @if (canSort()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n              [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n              [title]=\"\n                (activeSortCount() > 0\n                  ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                  : ('@general:actions.sort.title' | translate | async)) ?? ''\n              \"\n              [attr.aria-expanded]=\"sortMenuOpen()\"\n              [attr.aria-haspopup]=\"'dialog'\"\n              #sortButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"sortButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"sortMenuOpen.set(true)\"\n              (onClosed)=\"sortMenuOpen.set(false)\"\n            >\n              <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n                <axp-query-sorts\n                  [sortDefinitions]=\"sortDefinitions()\"\n                  [sortPresets]=\"sortPresets()\"\n                  [defaultSortQueries]=\"defaultSorts()\"\n                  (sortQueriesChange)=\"onSortsChanged($event)\"\n                  [initialSortQueries]=\"initialSorts()\"\n                ></axp-query-sorts>\n              </div>\n            </ax-popover>\n          </div>\n        }\n\n        <!-- ----- View groups presentation settings ----- -->\n        @if (showViewMenu()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"'default'\"\n              [title]=\"('@general:terms.interface.view.menu-button' | translate | async) ?? ''\"\n              [attr.aria-expanded]=\"viewMenuOpen()\"\n              [attr.aria-haspopup]=\"'menu'\"\n              #viewButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"viewButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"onViewMenuOpened()\"\n              (onClosed)=\"onViewMenuClosed()\"\n              #viewPopover\n            >\n              <div class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border w-72 max-w-full rounded-md overflow-hidden\">\n                <!-- ----- Nested column visibility panel ----- -->\n                @if (viewMenuPanel() === 'columns') {\n                  <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'default'\"\n                      [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                      (onClick)=\"viewMenuPanel.set('root')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                    </ax-button>\n                    <span class=\"min-w-0 flex-1 truncate font-bold\">\n                      {{ '@general:terms.common.columns' | translate | async }}\n                    </span>\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'primary'\"\n                      [text]=\"'@general:actions.reset.title' | translate | async\"\n                      (onClick)=\"resetViewColumns()\"\n                    ></ax-button>\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n                    <axp-query-columns\n                      [columns]=\"pickerColumns()\"\n                      [constrainHeight]=\"false\"\n                      (columnsChange)=\"onColumnsChanged($event)\"\n                    ></axp-query-columns>\n                  </div>\n                }\n                <!-- ----- Root presentation menu ----- -->\n                @else {\n                  <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n                    {{ '@general:terms.interface.view.menu-title' | translate | async }}\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body py-2\">\n                    <!-- ----- Display mode ----- -->\n                    @if (showListDisplayModeControl()) {\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        @if (hasTableListDisplayOption()) {\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'table'\"\n                            (onClick)=\"setListDisplayMode('table')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-table\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected table layout ----- -->\n                            @if (listDisplayMode() === 'table') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasCardListDisplayOption()) {\n                          <!-- ----- Card grid presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'card'\"\n                            (onClick)=\"setListDisplayMode('card')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected card layout ----- -->\n                            @if (listDisplayMode() === 'card') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasRowListDisplayOption()) {\n                          <!-- ----- Horizontal row-list presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'row'\"\n                            (onClick)=\"setListDisplayMode('row')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected row layout ----- -->\n                            @if (listDisplayMode() === 'row') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    }\n\n                    <!-- ----- Columns ----- -->\n                    @if (showColumnsControl()) {\n                      <!--->\n                      <!-- ----- Divider when a display-mode section is already shown ----- -->\n                      @if (showListDisplayModeControl()) {\n                        <ax-divider />\n                      }\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.common.columns' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                          (onClick)=\"openViewColumnsPanel()\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                          </ax-prefix>\n                          <ax-suffix>\n                            <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                          </ax-suffix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-list-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}@media(max-width:600px){.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n  @if (showViews()) {\n    <!-- ----- Query view tabs and custom-view actions ----- -->\n    <axp-query-view-tabs\n      class=\"w-full\"\n      [views]=\"viewQueries()\"\n      [selectedView]=\"selectedViewQuery()\"\n      (selectedViewChange)=\"onViewChanged($event)\"\n      (edit)=\"onEditQueryView($event)\"\n      (remove)=\"onDeleteQueryView($event)\"\n    ></axp-query-view-tabs>\n  }\n  @if (showFilterToolbarRow()) {\n    <!-- ----- Filter, sort, and view presentation controls ----- -->\n    <div class=\"axp-list-toolbar__row flex min-w-0 flex-wrap items-center gap-2 overflow-hidden border-b border-light w-full\">\n      @if (canFilter()) {\n        <axp-query-filters\n          class=\"min-w-0 flex-1\"\n          [filtersDefinitions]=\"filterDefinitions()\"\n          [initialFilters]=\"initialFilters()\"\n          [mode]=\"filterMode()\"\n          (onFiltersChanged)=\"onFiltersChanged($event)\"\n        ></axp-query-filters>\n      }\n      <div class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\">\n        <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n        @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n          <ax-button\n            [title]=\"'@general:actions.apply.title'\"\n            [iconOnly]=\"true\"\n            [color]=\"'primary'\"\n            (onClick)=\"applyFilters()\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n        <!-- ----- Save View appears when the list layout is dirty ----- -->\n        <axp-query-view-save-button\n          [visible]=\"canSaveQueryView()\"\n          (save)=\"onSaveQueryView()\"\n        ></axp-query-view-save-button>\n\n        <!-- ----- Sort opens the existing sort panel directly ----- -->\n        @if (canSort()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n              [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n              [title]=\"\n                (activeSortCount() > 0\n                  ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                  : ('@general:actions.sort.title' | translate | async)) ?? ''\n              \"\n              [attr.aria-expanded]=\"sortMenuOpen()\"\n              [attr.aria-haspopup]=\"'dialog'\"\n              #sortButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"sortButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"sortMenuOpen.set(true)\"\n              (onClosed)=\"sortMenuOpen.set(false)\"\n            >\n              <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n                <axp-query-sorts\n                  [sortDefinitions]=\"sortDefinitions()\"\n                  [sortPresets]=\"sortPresets()\"\n                  [defaultSortQueries]=\"defaultSorts()\"\n                  (sortQueriesChange)=\"onSortsChanged($event)\"\n                  [initialSortQueries]=\"initialSorts()\"\n                ></axp-query-sorts>\n              </div>\n            </ax-popover>\n          </div>\n        }\n\n        <!-- ----- View groups presentation settings ----- -->\n        @if (showViewMenu()) {\n          <div class=\"axp-toolbar-btn-host\">\n            <ax-button\n              class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n              [look]=\"'outline'\"\n              [iconOnly]=\"true\"\n              [color]=\"'default'\"\n              [title]=\"('@general:terms.interface.view.menu-button' | translate | async) ?? ''\"\n              [attr.aria-expanded]=\"viewMenuOpen()\"\n              [attr.aria-haspopup]=\"'menu'\"\n              #viewButton\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n              </ax-prefix>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"8\"\n              [target]=\"viewButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              (onOpened)=\"onViewMenuOpened()\"\n              (onClosed)=\"onViewMenuClosed()\"\n              #viewPopover\n            >\n              <div class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border w-72 max-w-full rounded-md overflow-hidden\">\n                <!-- ----- Nested column visibility panel ----- -->\n                @if (viewMenuPanel() === 'columns') {\n                  <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'default'\"\n                      [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                      (onClick)=\"viewMenuPanel.set('root')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                    </ax-button>\n                    <span class=\"min-w-0 flex-1 truncate font-bold\">\n                      {{ '@general:terms.common.columns' | translate | async }}\n                    </span>\n                    <ax-button\n                      class=\"ax-sm\"\n                      [look]=\"'blank'\"\n                      [color]=\"'primary'\"\n                      [text]=\"'@general:actions.reset.title' | translate | async\"\n                      (onClick)=\"resetViewColumns()\"\n                    ></ax-button>\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n                    <axp-query-columns\n                      [columns]=\"pickerColumns()\"\n                      [constrainHeight]=\"false\"\n                      (columnsChange)=\"onColumnsChanged($event)\"\n                    ></axp-query-columns>\n                  </div>\n                }\n                <!-- ----- Root presentation menu ----- -->\n                @else {\n                  <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n                    {{ '@general:terms.interface.view.menu-title' | translate | async }}\n                  </div>\n                  <div class=\"axp-toolbar-view-menu__body py-2\">\n                    <!-- ----- Display mode ----- -->\n                    @if (showListDisplayModeControl()) {\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        @if (hasTableListDisplayOption()) {\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'table'\"\n                            (onClick)=\"setListDisplayMode('table')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-table\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected table layout ----- -->\n                            @if (listDisplayMode() === 'table') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasCardListDisplayOption()) {\n                          <!-- ----- Card grid presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'card'\"\n                            (onClick)=\"setListDisplayMode('card')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected card layout ----- -->\n                            @if (listDisplayMode() === 'card') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                        @if (hasRowListDisplayOption()) {\n                          <!-- ----- Horizontal row-list presentation ----- -->\n                          <ax-button-item\n                            [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                            [selected]=\"listDisplayMode() === 'row'\"\n                            (onClick)=\"setListDisplayMode('row')\"\n                          >\n                            <ax-prefix>\n                              <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                            </ax-prefix>\n                            <!--->\n                            <!-- ----- Selected row layout ----- -->\n                            @if (listDisplayMode() === 'row') {\n                              <ax-suffix>\n                                <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                              </ax-suffix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    }\n\n                    <!-- ----- Columns ----- -->\n                    @if (showColumnsControl()) {\n                      <!--->\n                      <!-- ----- Divider when a display-mode section is already shown ----- -->\n                      @if (showListDisplayModeControl()) {\n                        <ax-divider />\n                      }\n                      <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                        {{ '@general:terms.common.columns' | translate | async }}\n                      </div>\n                      <ax-button-item-list>\n                        <ax-button-item\n                          [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                          (onClick)=\"openViewColumnsPanel()\"\n                        >\n                          <ax-prefix>\n                            <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                          </ax-prefix>\n                          <ax-suffix>\n                            <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                          </ax-suffix>\n                        </ax-button-item>\n                      </ax-button-item-list>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axp-list-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}@media(max-width:600px){.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -28160,7 +28277,7 @@ class AXPMetaDataWidgetEditComponent extends AXPValueWidgetComponent {
         }
       </div>
     </axp-widgets-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.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: AXPMetaDataWidgetEditComponent, decorators: [{
             type: Component,
@@ -28436,7 +28553,7 @@ class AXPNumberUnitBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-number-box>
       </div>
     </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.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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPNumberUnitBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -28691,7 +28808,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-BCLxS3rS.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,
@@ -28743,7 +28860,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-D7P08nHH.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-framework-client-layout-widgets-tabular-data-view-popup.component-DP9mP1CR.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -28808,6 +28925,92 @@ var timeDurationWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPTimeDurationWidgetColumnComponent: AXPTimeDurationWidgetColumnComponent
 });
 
+const AXP_TIME_DURATION_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPTimeDurationWidget = {
+    name: 'time-duration',
+    title: '@platform-layout-widgets:widgets.time-duration.title',
+    description: '@platform-layout-widgets:widgets.time-duration.description',
+    icon: 'fa-light fa-clock',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    defaultFilterWidgetName: 'time-duration-filter',
+    type: 'editor',
+    properties: [
+        AXP_DISABLED_PROPERTY,
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        {
+            name: 'from',
+            title: 'From',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: { id: 'year', title: 'year' },
+                interface: {
+                    name: 'from',
+                    path: 'options.from',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: [
+                            { id: 'year', title: 'year' },
+                            { id: 'month', title: 'month' },
+                            { id: 'week', title: 'week' },
+                            { id: 'day', title: 'day' },
+                            { id: 'hour', title: 'hour' },
+                            { id: 'minute', title: 'minute' },
+                            { id: 'second', title: 'second' },
+                            { id: 'millisecond', title: 'millisecond' },
+                        ],
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'to',
+            title: 'To',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: { id: 'millisecond', title: 'millisecond' },
+                interface: {
+                    name: 'to',
+                    path: 'options.to',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        dataSource: [
+                            { id: 'year', title: 'year' },
+                            { id: 'month', title: 'month' },
+                            { id: 'week', title: 'week' },
+                            { id: 'day', title: 'day' },
+                            { id: 'hour', title: 'hour' },
+                            { id: 'minute', title: 'minute' },
+                            { id: 'second', title: 'second' },
+                            { id: 'millisecond', title: 'millisecond' },
+                        ],
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return timeDurationWidgetView_component; }).then((c) => c.AXPTimerDurationWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return timeDurationWidgetEdit_component; }).then((c) => c.AXPTimerDurationWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return timeDurationWidgetColumn_component; }).then((c) => c.AXPTimeDurationWidgetColumnComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return timeDurationWidgetEdit_component; }).then((c) => c.AXPTimerDurationWidgetEditComponent),
+        },
+    },
+};
+
 class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -28850,7 +29053,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: 'equal' };
+            return { type: AXP_TIME_DURATION_FILTER_DEFAULT_OPERATOR };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         /** In filterMode the stored value is `{ value, operation, displayText }`; bind the unwrapped duration. */
@@ -28944,7 +29147,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         }
       </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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$8.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", "look", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "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", "look", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -29032,87 +29235,17 @@ var timeDurationWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPTimerDurationWidgetViewComponent: AXPTimerDurationWidgetViewComponent
 });
 
-const AXPTimeDurationWidget = {
-    name: 'time-duration',
-    title: '@platform-layout-widgets:widgets.time-duration.title',
-    description: '@platform-layout-widgets:widgets.time-duration.description',
-    icon: 'fa-light fa-clock',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    subCategory: AXP_WIDGETS_EDITOR_SUB_DATETIME,
-    groups: [AXPWidgetGroupEnum.FormElement],
-    defaultFilterWidgetName: 'time-duration-filter',
-    type: 'editor',
-    properties: [
-        AXP_DISABLED_PROPERTY,
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        {
-            name: 'from',
-            title: 'From',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                defaultValue: { id: 'year', title: 'year' },
-                interface: {
-                    name: 'from',
-                    path: 'options.from',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { id: 'year', title: 'year' },
-                            { id: 'month', title: 'month' },
-                            { id: 'week', title: 'week' },
-                            { id: 'day', title: 'day' },
-                            { id: 'hour', title: 'hour' },
-                            { id: 'minute', title: 'minute' },
-                            { id: 'second', title: 'second' },
-                            { id: 'millisecond', title: 'millisecond' },
-                        ],
-                    },
-                },
-            },
-            visible: true,
-        },
-        {
-            name: 'to',
-            title: 'To',
-            group: AXP_APPEARANCE_PROPERTY_GROUP,
-            schema: {
-                dataType: 'string',
-                defaultValue: { id: 'millisecond', title: 'millisecond' },
-                interface: {
-                    name: 'to',
-                    path: 'options.to',
-                    type: AXPWidgetsCatalog.select,
-                    options: {
-                        dataSource: [
-                            { id: 'year', title: 'year' },
-                            { id: 'month', title: 'month' },
-                            { id: 'week', title: 'week' },
-                            { id: 'day', title: 'day' },
-                            { id: 'hour', title: 'hour' },
-                            { id: 'minute', title: 'minute' },
-                            { id: 'second', title: 'second' },
-                            { id: 'millisecond', title: 'millisecond' },
-                        ],
-                    },
-                },
-            },
-            visible: true,
-        },
-    ],
+const AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPBooleanFilterWidget = {
+    name: 'boolean-filter',
+    title: 'Boolean Filter',
+    type: 'filter',
+    icon: 'fa-light fa-square',
+    defaultFilterOperator: AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return timeDurationWidgetView_component; }).then((c) => c.AXPTimerDurationWidgetViewComponent),
-        },
         edit: {
-            component: () => Promise.resolve().then(function () { return timeDurationWidgetEdit_component; }).then((c) => c.AXPTimerDurationWidgetEditComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return timeDurationWidgetColumn_component; }).then((c) => c.AXPTimeDurationWidgetColumnComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return timeDurationWidgetEdit_component; }).then((c) => c.AXPTimerDurationWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return booleanFilterWidgetEdit_component; }).then((c) => c.AXPBooleanFilterWidgetEditComponent),
         },
     },
 };
@@ -29122,7 +29255,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         this.lookup = viewChild('lookup', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lookup" }] : /* istanbul ignore next */ []));
-        this.operation = computed(() => this.getValue()?.operation || 'equal', /* @ts-ignore */
+        this.operation = computed(() => this.getValue()?.operation || AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this.getValue()?.value, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -29181,7 +29314,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         const item = this.items.find((c) => c.value === value);
         this.setValue({
             value,
-            operation: this.negative() ? { type: 'notEqual' } : { type: 'equal' },
+            operation: this.negative() ? { type: 'notEqual' } : { type: AXP_BOOLEAN_FILTER_DEFAULT_OPERATOR },
             displayText: displayText ?? item?.text,
         });
     }
@@ -29206,7 +29339,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
       >
       </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", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -29239,15 +29372,18 @@ var booleanFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPBooleanFilterWidgetEditComponent: AXPBooleanFilterWidgetEditComponent
 });
 
-const AXPBooleanFilterWidget = {
-    name: 'boolean-filter',
-    title: 'Boolean Filter',
+const AXP_NUMBER_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPNumberFilterWidget = {
+    name: 'number-filter',
+    title: 'Number Filter',
     type: 'filter',
+    defaultFilterWidgetName: 'number-filter',
+    defaultFilterOperator: AXP_NUMBER_FILTER_DEFAULT_OPERATOR,
     icon: 'fa-light fa-square',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return booleanFilterWidgetEdit_component; }).then((c) => c.AXPBooleanFilterWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return numberFilterWidgetEdit_component; }).then((c) => c.AXPNumberFilterWidgetEditComponent),
         },
     },
 };
@@ -29278,7 +29414,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: 'equal' };
+            return { type: AXP_NUMBER_FILTER_DEFAULT_OPERATOR };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.placeholder = computed(() => this.options()['placeholder'], /* @ts-ignore */
@@ -29398,7 +29534,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
         (selectedOperationChange)="handleOperationChange($event)"
       ></axp-filter-operations>
     </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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$9.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPNumberFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -29495,16 +29631,17 @@ var numberFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPNumberFilterWidgetEditComponent: AXPNumberFilterWidgetEditComponent
 });
 
-const AXPNumberFilterWidget = {
-    name: 'number-filter',
-    title: 'Number Filter',
+const AXP_STATUS_FILTER_DEFAULT_OPERATOR = 'equal';
+const AXPStatusFilterWidget = {
+    name: 'status-filter',
+    title: 'Status Filter',
     type: 'filter',
-    defaultFilterWidgetName: 'number-filter',
-    icon: 'fa-light fa-square',
+    icon: 'fa-light fa-circle-check',
+    defaultFilterOperator: AXP_STATUS_FILTER_DEFAULT_OPERATOR,
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return numberFilterWidgetEdit_component; }).then((c) => c.AXPNumberFilterWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return statusFilterWidgetEdit_component; }).then((c) => c.AXPStatusFilterWidgetEditComponent),
         },
     },
 };
@@ -29587,7 +29724,7 @@ class AXPStatusFilterWidgetEditComponent extends AXPDataListWidgetComponent {
     commitSelection(value, displayText) {
         const resolved = this.resolveStatusValue(value);
         this.setValue({
-            operation: this.multiple() ? { type: 'in' } : { type: 'equal' },
+            operation: this.multiple() ? { type: 'in' } : { type: AXP_STATUS_FILTER_DEFAULT_OPERATOR },
             value: resolved,
             ...(displayText ? { displayText } : {}),
         });
@@ -29619,7 +29756,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", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStatusFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -29653,15 +29790,17 @@ var statusFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPStatusFilterWidgetEditComponent: AXPStatusFilterWidgetEditComponent
 });
 
-const AXPStatusFilterWidget = {
-    name: 'status-filter',
-    title: 'Status Filter',
+const AXP_STRING_FILTER_DEFAULT_OPERATOR = 'contains';
+const AXPStringFilterWidget = {
+    name: 'string-filter',
+    title: 'String Filter',
+    icon: 'fa-light fa-square',
     type: 'filter',
-    icon: 'fa-light fa-circle-check',
+    defaultFilterOperator: AXP_STRING_FILTER_DEFAULT_OPERATOR,
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
     components: {
         edit: {
-            component: () => Promise.resolve().then(function () { return statusFilterWidgetEdit_component; }).then((c) => c.AXPStatusFilterWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return stringFilterWidgetEdit_component; }).then((c) => c.AXPStringWidgetFilterComponent),
         },
     },
 };
@@ -29691,7 +29830,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
             if (ops?.length === 1) {
                 return { type: ops[0].name };
             }
-            return { type: 'contains' };
+            return { type: AXP_STRING_FILTER_DEFAULT_OPERATOR };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this.getValue()?.value, /* @ts-ignore */
@@ -29752,7 +29891,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
         (selectedOperationChange)="handleOperationChanged($event)"
       ></axp-filter-operations>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$8.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "look", "operations"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStringWidgetFilterComponent, decorators: [{
             type: Component,
@@ -29809,19 +29948,6 @@ var stringFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPStringWidgetFilterComponent: AXPStringWidgetFilterComponent
 });
 
-const AXPStringFilterWidget = {
-    name: 'string-filter',
-    title: 'String Filter',
-    icon: 'fa-light fa-square',
-    type: 'filter',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return stringFilterWidgetEdit_component; }).then((c) => c.AXPStringWidgetFilterComponent),
-        },
-    },
-};
-
 const AXPAlertBoxWidget = {
     name: 'alert-box-layout',
     title: '@platform-layout-widgets:widgets.alert-box-layout.title',
@@ -29950,7 +30076,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$i.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,
@@ -30014,7 +30140,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$i.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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], 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" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAlertBoxWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -30246,7 +30372,7 @@ class AXPBadgeLayoutWidgetViewComponent extends AXPValueWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, styles: ["@layer properties;.axp-badge-layout-widget-view{display:inline-flex;min-width:0px}.axp-badge-layout-widget-view ax-badge.__badge{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-badge-layout-widget-view .__prefix{display:inline-flex;flex-shrink:0;align-items:center}.axp-badge-layout-widget-view .__icon{font-size:.85em;opacity:90%}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer properties;.axp-badge-layout-widget-view{display:inline-flex;min-width:0px}.axp-badge-layout-widget-view ax-badge.__badge{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-badge-layout-widget-view .__prefix{display:inline-flex;flex-shrink:0;align-items:center}.axp-badge-layout-widget-view .__icon{font-size:.85em;opacity:90%}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBadgeLayoutWidgetViewComponent, decorators: [{
             type: Component,
@@ -30364,7 +30490,7 @@ class AXPBadgeLayoutWidgetColumnComponent extends AXPColumnWidgetComponent {
     } @else {
       <span class="text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPBadgeLayoutWidgetColumnComponent, decorators: [{
             type: Component,
@@ -30506,7 +30632,7 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         </p>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -30662,7 +30788,7 @@ class AXPFormFieldWidgetDesignerComponent extends AXPGridItemBaseLayoutWidgetCom
         </p>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -31746,7 +31872,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$j.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$j.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], 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: "ngmodule", type: AXTranslationModule }, { 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: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPanelWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -31850,7 +31976,7 @@ class AXPPanelWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
       </ax-accordion-item>
     </ax-accordion-group>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$j.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$j.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$4.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,
@@ -32072,7 +32198,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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.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$4.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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.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$4.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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTabSetWidgetViewComponent, decorators: [{
             type: Component,
@@ -32183,7 +32309,7 @@ class AXPTabSetWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
         ></axp-designer-add-widget-line-button>
       }
     </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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetLineButtonComponent, selector: "axp-designer-add-widget-line-button", inputs: ["text"], outputs: ["onClick"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.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: i1$2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i1$2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetLineButtonComponent, selector: "axp-designer-add-widget-line-button", inputs: ["text"], outputs: ["onClick"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTabSetWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -32538,7 +32664,7 @@ class AXPTextBlockWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         {{ content() | translate | async }}
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }, { 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: AXPTextBlockWidgetViewComponent, decorators: [{
             type: Component,
@@ -32644,7 +32770,7 @@ const AXPTextBlockWidget = {
             component: () => Promise.resolve().then(function () { return textBlockWidgetView_component; }).then((c) => c.AXPTextBlockWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-oLFeaHdz.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-BYg6-PoM.mjs').then((c) => c.AXPTextBlockWidgetDesignerComponent),
         },
     },
 };
@@ -32825,7 +32951,7 @@ const AXPTriggersWidget = {
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
         edit: {
-            component: () => import('./acorex-platform-framework-client-layout-widgets-triggers-widget-editor.component-DDDoPoQa.mjs').then((c) => c.AXPTriggersWidgetEditComponent),
+            component: () => import('./acorex-platform-framework-client-layout-widgets-triggers-widget-editor.component-B_OM0T7i.mjs').then((c) => c.AXPTriggersWidgetEditComponent),
         },
     },
 };
@@ -32953,6 +33079,7 @@ const EXTENDED_WIDGETS = [
             categories: AXP_WIDGETS_EDITOR_CATEGORY,
             groups: [AXPWidgetGroupEnum.BaseWidget],
             type: 'filter',
+            defaultFilterOperator: AXP_SELECT_FILTER_DEFAULT_OPERATOR,
             components: {},
             options: {
                 filterMode: true,
@@ -32967,6 +33094,7 @@ const EXTENDED_WIDGETS = [
             title: 'Date Time Filter',
             categories: AXP_WIDGETS_EDITOR_CATEGORY,
             type: 'filter',
+            defaultFilterOperator: AXP_DATETIME_FILTER_DEFAULT_OPERATOR,
             components: {},
             options: {
                 filterMode: true,
@@ -32981,6 +33109,7 @@ const EXTENDED_WIDGETS = [
             title: 'Time Duration Filter',
             categories: AXP_WIDGETS_EDITOR_CATEGORY,
             type: 'filter',
+            defaultFilterOperator: AXP_TIME_DURATION_FILTER_DEFAULT_OPERATOR,
             components: {},
             options: {
                 filterMode: true,
@@ -33425,5 +33554,5 @@ var getWidgetsForAi_query = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPConditionClauseWidget as $, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP as A, AXPCallbackValidationWidgetEditComponent as B, AXPCheckBoxWidget as C, AXPCheckBoxWidgetColumnComponent as D, AXPCheckBoxWidgetDesignerComponent as E, AXPCheckBoxWidgetEditComponent as F, AXPCheckBoxWidgetPrintComponent as G, AXPCheckBoxWidgetViewComponent as H, AXPCodeEditorWidget as I, AXPColorBoxWidget as J, AXPColorBoxWidgetColumnComponent as K, AXPColorBoxWidgetDesignerComponent as L, AXPColorBoxWidgetEditComponent as M, AXPColorBoxWidgetViewComponent as N, AXPColorChooserWidget as O, AXPColorChooserWidgetColumnComponent as P, AXPColorChooserWidgetDesignerComponent as Q, AXPColorChooserWidgetEditComponent as R, AXPColorChooserWidgetViewComponent as S, AXPColorPaletteWidget as T, AXPColorPaletteWidgetColumnComponent as U, AXPColorPaletteWidgetDesignerComponent as V, AXPColorPaletteWidgetEditComponent as W, AXPColorPaletteWidgetViewComponent as X, AXPConditionBuilderWidget as Y, AXPConditionBuilderWidgetEditComponent as Z, AXPConditionBuilderWidgetViewComponent as _, textBlockContentClass as a, AXPLargeTextWidget as a$, AXPConditionClauseWidgetEditComponent as a0, AXPConnectedDragDropListsWidget as a1, AXPConnectedListsWidgetColumnComponent as a2, AXPConnectedListsWidgetEditComponent as a3, AXPConnectedListsWidgetViewComponent as a4, AXPContactWidget as a5, AXPContactWidgetColumnComponent as a6, AXPContactWidgetEditComponent as a7, AXPContactWidgetViewComponent as a8, AXPDataListWidget as a9, AXPFlexItemWidgetViewComponent as aA, AXPFlexOptionsWidget as aB, AXPFlexOptionsWidgetEditComponent as aC, AXPFlexWidget as aD, AXPFlexWidgetDesignerComponent as aE, AXPFlexWidgetViewComponent as aF, AXPGetWidgetsForAIQuery as aG, AXPGreaterThanExpressionValidationWidget as aH, AXPGreaterThanValidationWidgetEditComponent as aI, AXPGridItemOptionsWidget as aJ, AXPGridItemOptionsWidgetEditComponent as aK, AXPGridOptionsWidget as aL, AXPGridOptionsWidgetEditComponent as aM, AXPImageMarkerPopupComponent as aN, AXPImageMarkerWidget as aO, AXPImageMarkerWidgetColumnComponent as aP, AXPImageMarkerWidgetEditComponent as aQ, AXPImageMarkerWidgetViewComponent as aR, AXPIntegrationConnectionActionsService as aS, AXPIntegrationConnectionsPanelWidget as aT, AXPIntegrationConnectionsPanelWidgetEditComponent as aU, AXPItemConfiguratorWidget as aV, AXPItemConfiguratorWidgetColumnComponent as aW, AXPItemConfiguratorWidgetEditComponent as aX, AXPJsonViewerWidget as aY, AXPJsonViewerWidgetEditComponent as aZ, AXPJsonViewerWidgetViewComponent as a_, AXPDataListWidgetViewComponent as aa, AXPDataSourceOptionsWidget as ab, AXPDataSourceOptionsWidgetEditComponent as ac, AXPDateTimeBoxWidget as ad, AXPDateTimeBoxWidgetColumnComponent as ae, AXPDateTimeBoxWidgetEditComponent as af, AXPDateTimeBoxWidgetViewComponent as ag, AXPDirectionWidget as ah, AXPDirectionWidgetEditComponent as ai, AXPDragDropListWidget as aj, AXPEditorJsWidget as ak, AXPEditorJsWidgetColumnComponent as al, AXPEditorJsWidgetEditComponent as am, AXPEditorJsWidgetViewComponent as an, AXPEqualValidationWidget as ao, AXPEqualValidationWidgetEditComponent as ap, AXPFieldsetWidget as aq, AXPFieldsetWidgetDesignerComponent as ar, AXPFieldsetWidgetViewComponent as as, AXPFileViewerWidget as at, AXPFileViewerWidgetEditComponent as au, AXPFileViewerWidgetViewComponent as av, AXPFlexItemOptionsWidget as aw, AXPFlexItemOptionsWidgetEditComponent as ax, AXPFlexItemWidget as ay, AXPFlexItemWidgetDesignerComponent as az, AXPAdvancedGridItemWidget as b, AXPRichTextWidgetViewComponent as b$, AXPLargeTextWidgetColumnComponent as b0, AXPLargeTextWidgetEditComponent as b1, AXPLargeTextWidgetPrintComponent as b2, AXPLargeTextWidgetViewComponent as b3, AXPLessThanExpressionValidationWidget as b4, AXPLessThanValidationWidgetEditComponent as b5, AXPListStylingRulesExtendedWidget as b6, AXPListWidgetColumnComponent as b7, AXPListWidgetEditComponent as b8, AXPListWidgetViewComponent as b9, AXPProgressBarWidgetColumnComponent as bA, AXPProgressBarWidgetEditComponent as bB, AXPProgressBarWidgetViewComponent as bC, AXPProviderSelectWidgetColumnComponent as bD, AXPProviderSelectWidgetEditBase as bE, AXPProviderSelectWidgetViewComponent as bF, AXPQrcodeViewerService as bG, AXPQrcodeWidget as bH, AXPQrcodeWidgetColumnComponent as bI, AXPQrcodeWidgetEditComponent as bJ, AXPQrcodeWidgetViewComponent as bK, AXPRatePickerWidget as bL, AXPRatePickerWidgetColumnComponent as bM, AXPRatePickerWidgetEditComponent as bN, AXPRatePickerWidgetViewComponent as bO, AXPRegularExpressionValidationWidget as bP, AXPRegularExpressionValidationWidgetEditComponent as bQ, AXPRepeaterWidget as bR, AXPRepeaterWidgetDesignerComponent as bS, AXPRepeaterWidgetEditComponent as bT, AXPRepeaterWidgetViewComponent as bU, AXPRequiredValidationWidget as bV, AXPRequiredValidationWidgetEditComponent as bW, AXPRichTextWidget as bX, AXPRichTextWidgetColumnComponent as bY, AXPRichTextWidgetEditComponent as bZ, AXPRichTextWidgetPrintComponent as b_, AXPLocalDataSourceSheetWidget as ba, AXPLocalDataSourceSheetWidgetEditComponent as bb, AXPMapWidgetEditComponent as bc, AXPMapWidgetViewComponent as bd, AXPMaxLengthExpressionValidationWidget as be, AXPMaxLengthValidationWidgetEditComponent as bf, AXPMinLengthExpressionValidationWidget as bg, AXPMinLengthValidationWidgetEditComponent as bh, AXPNodeRendererWidget as bi, AXPNodeRendererWidgetDesignerComponent as bj, AXPNodeRendererWidgetEditComponent as bk, AXPNodeRendererWidgetViewComponent as bl, AXPNumberBoxWidget as bm, AXPNumberBoxWidgetColumnComponent as bn, AXPNumberBoxWidgetEditComponent as bo, AXPNumberBoxWidgetPrintComponent as bp, AXPNumberBoxWidgetViewComponent as bq, AXPOutcomeResultsViewerWidget as br, AXPOutcomeResultsViewerWidgetViewComponent as bs, AXPPageWidget as bt, AXPPageWidgetViewComponent as bu, AXPPasswordBoxWidget as bv, AXPPasswordBoxWidgetColumnComponent as bw, AXPPasswordBoxWidgetEditComponent as bx, AXPPasswordBoxWidgetViewComponent as by, AXPProgressBarWidget as bz, AXPAdvancedGridItemWidgetDesignerComponent as c, AXP_Flex_Box_Align_Options as c$, AXPSchedulerPickerWidget as c0, AXPSelectBoxWidget as c1, AXPSelectBoxWidgetColumnComponent as c2, AXPSelectBoxWidgetEditComponent as c3, AXPSelectBoxWidgetViewComponent as c4, AXPSelectLanguagePopup as c5, AXPSelectionListWidget as c6, AXPSelectionListWidgetColumnComponent as c7, AXPSelectionListWidgetDesignerComponent as c8, AXPSelectionListWidgetEditComponent as c9, AXPTagEditorWidgetViewComponent as cA, AXPTemplateBoxWidget as cB, AXPTemplateBoxWidgetColumnComponent as cC, AXPTemplateBoxWidgetEditComponent as cD, AXPTemplateBoxWidgetPrintComponent as cE, AXPTemplateBoxWidgetViewComponent as cF, AXPTextBoxWidget as cG, AXPTextBoxWidgetColumnComponent as cH, AXPTextBoxWidgetEditComponent as cI, AXPTextBoxWidgetPrintComponent as cJ, AXPTextBoxWidgetViewComponent as cK, AXPToggleWidget as cL, AXPToggleWidgetColumnComponent as cM, AXPToggleWidgetEditComponent as cN, AXPToggleWidgetPrintComponent as cO, AXPToggleWidgetViewComponent as cP, AXPWidgetFieldConfiguratorWidget as cQ, AXPWidgetFieldConfiguratorWidgetColumnComponent as cR, AXPWidgetFieldConfiguratorWidgetEditComponent as cS, AXPWidgetsModule as cT, AXP_ABSOLUTE_UNITS as cU, AXP_BORDER_RADIUS_UNITS as cV, AXP_BORDER_WIDTH_UNITS as cW, AXP_CONDITION_CLAUSE_WIDGET_NAME as cX, AXP_DATA_LIST_CMD_DELETE as cY, AXP_DATA_LIST_CMD_EDIT as cZ, AXP_DATA_LIST_PENDING_DELETE_KEY as c_, AXPSelectionListWidgetViewComponent as ca, AXPSignatureWidget as cb, AXPSignatureWidgetColumnComponent as cc, AXPSignatureWidgetEditComponent as cd, AXPSignatureWidgetViewComponent as ce, AXPSpacingWidget as cf, AXPSpacingWidgetEditComponent as cg, AXPStatusChipComponent as ch, AXPStatusWidget as ci, AXPStatusWidgetColumnComponent as cj, AXPStatusWidgetEditComponent as ck, AXPStatusWidgetViewComponent as cl, AXPStepWizardWidget as cm, AXPStepWizardWidgetDesignerComponent as cn, AXPStepWizardWidgetViewComponent as co, AXPStopwatchWidget as cp, AXPStopwatchWidgetViewComponent as cq, AXPTableItemWidget as cr, AXPTableItemWidgetDesignerComponent as cs, AXPTableItemWidgetViewComponent as ct, AXPTableWidget as cu, AXPTableWidgetDesignerComponent as cv, AXPTableWidgetViewComponent as cw, AXPTagEditorWidget as cx, AXPTagEditorWidgetColumnComponent as cy, AXPTagEditorWidgetEditComponent as cz, AXPAdvancedGridItemWidgetViewComponent as d, AXP_Flex_Box_Alignments as d0, AXP_Flex_Box_Justify_Options as d1, AXP_Grid_Box_Align_Items_Options as d2, AXP_Grid_Box_Alignments as d3, AXP_Grid_Box_Justify_Items_Options as d4, AXP_LIST_STYLING_RULES_WIDGET_NAME as d5, AXP_LOCAL_DATA_SOURCE_SHEET_WIDGET_NAME as d6, AXP_RELATIVE_UNITS as d7, AXP_RELATIVE_UNITS_NO_PERCENT as d8, AXP_ROW_EXPR_PREFIX as d9, AXP_SPACING_UNITS as da, AXP_default_Border_Box_Units as db, AXP_default_Border_Box_Value as dc, AXP_default_Spacing_Box_Units as dd, AXP_default_Spacing_Box_Value as de, DEFAULT_QRCODE_SIZE as df, DEFAULT_STRATEGY_CONFIG as dg, STRATEGY_CONFIG_TOKEN as dh, applyLeafVisibilityToDataListColumnTree as di, flattenDataListWidgetColumns as dj, formatConditionBuilderChip as dk, formatConditionBuilderSentence as dl, isDataListColumnBand as dm, prepareNodeRendererChild as dn, resolveColorChooserGroups as dp, resolveDataListColumnWidth as dq, tokensToPlainText as dr, AXPAdvancedGridOptionsWidget as e, AXPAdvancedGridOptionsWidgetEditComponent as f, AXPAdvancedGridWidget as g, AXPAdvancedGridWidgetDesignerComponent as h, AXPAdvancedGridWidgetViewComponent as i, AXPAvatarWidget as j, AXPAvatarWidgetColumnComponent as k, AXPAvatarWidgetDesignerComponent as l, AXPAvatarWidgetEditComponent as m, AXPAvatarWidgetViewComponent as n, AXPBetweenExpressionValidationWidget as o, AXPBetweenValidationWidgetEditComponent as p, AXPBlockWidget as q, AXPBlockWidgetDesignerComponent as r, AXPBlockWidgetViewComponent as s, textBlockStyleAttribute as t, AXPBorderWidget as u, AXPBorderWidgetEditComponent as v, AXPButtonWidget as w, AXPButtonWidgetColumnComponent as x, AXPButtonWidgetViewComponent as y, AXPCallbackValidationWidget as z };
-//# sourceMappingURL=acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-CWvC9Eh2.mjs.map
+export { AXPConditionClauseWidget as $, AXP_REPEATER_ENTITY_BY_KEY_LOOKUP as A, AXPCallbackValidationWidgetEditComponent as B, AXPCheckBoxWidget as C, AXPCheckBoxWidgetColumnComponent as D, AXPCheckBoxWidgetDesignerComponent as E, AXPCheckBoxWidgetEditComponent as F, AXPCheckBoxWidgetPrintComponent as G, AXPCheckBoxWidgetViewComponent as H, AXPCodeEditorWidget as I, AXPColorBoxWidget as J, AXPColorBoxWidgetColumnComponent as K, AXPColorBoxWidgetDesignerComponent as L, AXPColorBoxWidgetEditComponent as M, AXPColorBoxWidgetViewComponent as N, AXPColorChooserWidget as O, AXPColorChooserWidgetColumnComponent as P, AXPColorChooserWidgetDesignerComponent as Q, AXPColorChooserWidgetEditComponent as R, AXPColorChooserWidgetViewComponent as S, AXPColorPaletteWidget as T, AXPColorPaletteWidgetColumnComponent as U, AXPColorPaletteWidgetDesignerComponent as V, AXPColorPaletteWidgetEditComponent as W, AXPColorPaletteWidgetViewComponent as X, AXPConditionBuilderWidget as Y, AXPConditionBuilderWidgetEditComponent as Z, AXPConditionBuilderWidgetViewComponent as _, textBlockContentClass as a, AXPJsonViewerWidgetViewComponent as a$, AXPConditionClauseWidgetEditComponent as a0, AXPConnectedDragDropListsWidget as a1, AXPConnectedListsWidgetColumnComponent as a2, AXPConnectedListsWidgetEditComponent as a3, AXPConnectedListsWidgetViewComponent as a4, AXPContactWidget as a5, AXPContactWidgetColumnComponent as a6, AXPContactWidgetEditComponent as a7, AXPContactWidgetViewComponent as a8, AXPDataListColumnFooterComponent as a9, AXPFlexItemWidgetDesignerComponent as aA, AXPFlexItemWidgetViewComponent as aB, AXPFlexOptionsWidget as aC, AXPFlexOptionsWidgetEditComponent as aD, AXPFlexWidget as aE, AXPFlexWidgetDesignerComponent as aF, AXPFlexWidgetViewComponent as aG, AXPGetWidgetsForAIQuery as aH, AXPGreaterThanExpressionValidationWidget as aI, AXPGreaterThanValidationWidgetEditComponent as aJ, AXPGridItemOptionsWidget as aK, AXPGridItemOptionsWidgetEditComponent as aL, AXPGridOptionsWidget as aM, AXPGridOptionsWidgetEditComponent as aN, AXPImageMarkerPopupComponent as aO, AXPImageMarkerWidget as aP, AXPImageMarkerWidgetColumnComponent as aQ, AXPImageMarkerWidgetEditComponent as aR, AXPImageMarkerWidgetViewComponent as aS, AXPIntegrationConnectionActionsService as aT, AXPIntegrationConnectionsPanelWidget as aU, AXPIntegrationConnectionsPanelWidgetEditComponent as aV, AXPItemConfiguratorWidget as aW, AXPItemConfiguratorWidgetColumnComponent as aX, AXPItemConfiguratorWidgetEditComponent as aY, AXPJsonViewerWidget as aZ, AXPJsonViewerWidgetEditComponent as a_, AXPDataListWidget as aa, AXPDataListWidgetViewComponent as ab, AXPDataSourceOptionsWidget as ac, AXPDataSourceOptionsWidgetEditComponent as ad, AXPDateTimeBoxWidget as ae, AXPDateTimeBoxWidgetColumnComponent as af, AXPDateTimeBoxWidgetEditComponent as ag, AXPDateTimeBoxWidgetViewComponent as ah, AXPDirectionWidget as ai, AXPDirectionWidgetEditComponent as aj, AXPDragDropListWidget as ak, AXPEditorJsWidget as al, AXPEditorJsWidgetColumnComponent as am, AXPEditorJsWidgetEditComponent as an, AXPEditorJsWidgetViewComponent as ao, AXPEqualValidationWidget as ap, AXPEqualValidationWidgetEditComponent as aq, AXPFieldsetWidget as ar, AXPFieldsetWidgetDesignerComponent as as, AXPFieldsetWidgetViewComponent as at, AXPFileViewerWidget as au, AXPFileViewerWidgetEditComponent as av, AXPFileViewerWidgetViewComponent as aw, AXPFlexItemOptionsWidget as ax, AXPFlexItemOptionsWidgetEditComponent as ay, AXPFlexItemWidget as az, AXPAdvancedGridItemWidget as b, AXPRichTextWidgetPrintComponent as b$, AXPLargeTextWidget as b0, AXPLargeTextWidgetColumnComponent as b1, AXPLargeTextWidgetEditComponent as b2, AXPLargeTextWidgetPrintComponent as b3, AXPLargeTextWidgetViewComponent as b4, AXPLessThanExpressionValidationWidget as b5, AXPLessThanValidationWidgetEditComponent as b6, AXPListStylingRulesExtendedWidget as b7, AXPListWidgetColumnComponent as b8, AXPListWidgetEditComponent as b9, AXPProgressBarWidget as bA, AXPProgressBarWidgetColumnComponent as bB, AXPProgressBarWidgetEditComponent as bC, AXPProgressBarWidgetViewComponent as bD, AXPProviderSelectWidgetColumnComponent as bE, AXPProviderSelectWidgetEditBase as bF, AXPProviderSelectWidgetViewComponent as bG, AXPQrcodeViewerService as bH, AXPQrcodeWidget as bI, AXPQrcodeWidgetColumnComponent as bJ, AXPQrcodeWidgetEditComponent as bK, AXPQrcodeWidgetViewComponent as bL, AXPRatePickerWidget as bM, AXPRatePickerWidgetColumnComponent as bN, AXPRatePickerWidgetEditComponent as bO, AXPRatePickerWidgetViewComponent as bP, AXPRegularExpressionValidationWidget as bQ, AXPRegularExpressionValidationWidgetEditComponent as bR, AXPRepeaterWidget as bS, AXPRepeaterWidgetDesignerComponent as bT, AXPRepeaterWidgetEditComponent as bU, AXPRepeaterWidgetViewComponent as bV, AXPRequiredValidationWidget as bW, AXPRequiredValidationWidgetEditComponent as bX, AXPRichTextWidget as bY, AXPRichTextWidgetColumnComponent as bZ, AXPRichTextWidgetEditComponent as b_, AXPListWidgetViewComponent as ba, AXPLocalDataSourceSheetWidget as bb, AXPLocalDataSourceSheetWidgetEditComponent as bc, AXPMapWidgetEditComponent as bd, AXPMapWidgetViewComponent as be, AXPMaxLengthExpressionValidationWidget as bf, AXPMaxLengthValidationWidgetEditComponent as bg, AXPMinLengthExpressionValidationWidget as bh, AXPMinLengthValidationWidgetEditComponent as bi, AXPNodeRendererWidget as bj, AXPNodeRendererWidgetDesignerComponent as bk, AXPNodeRendererWidgetEditComponent as bl, AXPNodeRendererWidgetViewComponent as bm, AXPNumberBoxWidget as bn, AXPNumberBoxWidgetColumnComponent as bo, AXPNumberBoxWidgetEditComponent as bp, AXPNumberBoxWidgetPrintComponent as bq, AXPNumberBoxWidgetViewComponent as br, AXPOutcomeResultsViewerWidget as bs, AXPOutcomeResultsViewerWidgetViewComponent as bt, AXPPageWidget as bu, AXPPageWidgetViewComponent as bv, AXPPasswordBoxWidget as bw, AXPPasswordBoxWidgetColumnComponent as bx, AXPPasswordBoxWidgetEditComponent as by, AXPPasswordBoxWidgetViewComponent as bz, AXPAdvancedGridItemWidgetDesignerComponent as c, AXP_DATA_LIST_PENDING_DELETE_KEY as c$, AXPRichTextWidgetViewComponent as c0, AXPSchedulerPickerWidget as c1, AXPSelectBoxWidget as c2, AXPSelectBoxWidgetColumnComponent as c3, AXPSelectBoxWidgetEditComponent as c4, AXPSelectBoxWidgetViewComponent as c5, AXPSelectLanguagePopup as c6, AXPSelectionListWidget as c7, AXPSelectionListWidgetColumnComponent as c8, AXPSelectionListWidgetDesignerComponent as c9, AXPTagEditorWidgetEditComponent as cA, AXPTagEditorWidgetViewComponent as cB, AXPTemplateBoxWidget as cC, AXPTemplateBoxWidgetColumnComponent as cD, AXPTemplateBoxWidgetEditComponent as cE, AXPTemplateBoxWidgetPrintComponent as cF, AXPTemplateBoxWidgetViewComponent as cG, AXPTextBoxWidget as cH, AXPTextBoxWidgetColumnComponent as cI, AXPTextBoxWidgetEditComponent as cJ, AXPTextBoxWidgetPrintComponent as cK, AXPTextBoxWidgetViewComponent as cL, AXPToggleWidget as cM, AXPToggleWidgetColumnComponent as cN, AXPToggleWidgetEditComponent as cO, AXPToggleWidgetPrintComponent as cP, AXPToggleWidgetViewComponent as cQ, AXPWidgetFieldConfiguratorWidget as cR, AXPWidgetFieldConfiguratorWidgetColumnComponent as cS, AXPWidgetFieldConfiguratorWidgetEditComponent as cT, AXPWidgetsModule as cU, AXP_ABSOLUTE_UNITS as cV, AXP_BORDER_RADIUS_UNITS as cW, AXP_BORDER_WIDTH_UNITS as cX, AXP_CONDITION_CLAUSE_WIDGET_NAME as cY, AXP_DATA_LIST_CMD_DELETE as cZ, AXP_DATA_LIST_CMD_EDIT as c_, AXPSelectionListWidgetEditComponent as ca, AXPSelectionListWidgetViewComponent as cb, AXPSignatureWidget as cc, AXPSignatureWidgetColumnComponent as cd, AXPSignatureWidgetEditComponent as ce, AXPSignatureWidgetViewComponent as cf, AXPSpacingWidget as cg, AXPSpacingWidgetEditComponent as ch, AXPStatusChipComponent as ci, AXPStatusWidget as cj, AXPStatusWidgetColumnComponent as ck, AXPStatusWidgetEditComponent as cl, AXPStatusWidgetViewComponent as cm, AXPStepWizardWidget as cn, AXPStepWizardWidgetDesignerComponent as co, AXPStepWizardWidgetViewComponent as cp, AXPStopwatchWidget as cq, AXPStopwatchWidgetViewComponent as cr, AXPTableItemWidget as cs, AXPTableItemWidgetDesignerComponent as ct, AXPTableItemWidgetViewComponent as cu, AXPTableWidget as cv, AXPTableWidgetDesignerComponent as cw, AXPTableWidgetViewComponent as cx, AXPTagEditorWidget as cy, AXPTagEditorWidgetColumnComponent as cz, AXPAdvancedGridItemWidgetViewComponent as d, AXP_DATETIME_FILTER_DEFAULT_OPERATOR as d0, AXP_Flex_Box_Align_Options as d1, AXP_Flex_Box_Alignments as d2, AXP_Flex_Box_Justify_Options as d3, AXP_Grid_Box_Align_Items_Options as d4, AXP_Grid_Box_Alignments as d5, AXP_Grid_Box_Justify_Items_Options as d6, AXP_LIST_STYLING_RULES_WIDGET_NAME as d7, AXP_LOCAL_DATA_SOURCE_SHEET_WIDGET_NAME as d8, AXP_RELATIVE_UNITS as d9, AXP_RELATIVE_UNITS_NO_PERCENT as da, AXP_ROW_EXPR_PREFIX as db, AXP_SELECT_FILTER_DEFAULT_OPERATOR as dc, AXP_SPACING_UNITS as dd, AXP_default_Border_Box_Units as de, AXP_default_Border_Box_Value as df, AXP_default_Spacing_Box_Units as dg, AXP_default_Spacing_Box_Value as dh, DEFAULT_QRCODE_SIZE as di, DEFAULT_STRATEGY_CONFIG as dj, STRATEGY_CONFIG_TOKEN as dk, applyLeafVisibilityToDataListColumnTree as dl, flattenDataListWidgetColumns as dm, formatConditionBuilderChip as dn, formatConditionBuilderSentence as dp, isDataListColumnBand as dq, prepareNodeRendererChild as dr, resolveColorChooserGroups as ds, resolveDataListColumnWidth as dt, tokensToPlainText as du, AXPAdvancedGridOptionsWidget as e, AXPAdvancedGridOptionsWidgetEditComponent as f, AXPAdvancedGridWidget as g, AXPAdvancedGridWidgetDesignerComponent as h, AXPAdvancedGridWidgetViewComponent as i, AXPAvatarWidget as j, AXPAvatarWidgetColumnComponent as k, AXPAvatarWidgetDesignerComponent as l, AXPAvatarWidgetEditComponent as m, AXPAvatarWidgetViewComponent as n, AXPBetweenExpressionValidationWidget as o, AXPBetweenValidationWidgetEditComponent as p, AXPBlockWidget as q, AXPBlockWidgetDesignerComponent as r, AXPBlockWidgetViewComponent as s, textBlockStyleAttribute as t, AXPBorderWidget as u, AXPBorderWidgetEditComponent as v, AXPButtonWidget as w, AXPButtonWidgetColumnComponent as x, AXPButtonWidgetViewComponent as y, AXPCallbackValidationWidget as z };
+//# sourceMappingURL=acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-DuFZf8eb.mjs.map