@acorex/platform 20.8.15 → 20.8.16

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

@@ -25,14 +25,14 @@ import { AXPDeviceService, AXPColorPaletteService, extractValue, setSmart, AXPTa
 import * as i1$3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, inject, computed, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, effect, linkedSignal, InjectionToken, Injectable, ViewEncapsulation, viewChild, untracked, output, input, ChangeDetectorRef, afterNextRender, ViewChild, Input, model, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
+import { signal, inject, computed, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, effect, linkedSignal, InjectionToken, Injectable, model, input, viewChild, untracked, ViewEncapsulation, output, ChangeDetectorRef, afterNextRender, ViewChild, Input, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
 import * as i1$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
 import { AXColorUtil } from '@acorex/core/utils';
-import { AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, AXPFileActionsService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
+import { AXPClipBoardService, AXPSettingsService, AXPRegionalSetting, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS, resolveDateFilterPresets, findManualPresetIdByOperation, applyDateFilterPreset, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, AXPFileActionsService, AXPStatusDefinitionProviderService, AXPRefreshEvent, AXPCommonSettings } from '@acorex/platform/common';
 import * as i2$2 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import { isNil, isNull, isEmpty, isNumber, castArray, set, get, isEqual, cloneDeep } from 'lodash-es';
@@ -41,8 +41,13 @@ import * as i3$3 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { AXFormatService } from '@acorex/core/format';
-import * as i3$4 from '@acorex/components/datetime-box';
+import * as i3$5 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
+import { AXCalendarService, AXTimeDurationFormatter } from '@acorex/core/date-time';
+import * as i3$4 from '@acorex/components/popover';
+import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
+import * as i2$3 from '@acorex/components/selection-list';
+import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { AXSafePipe } from '@acorex/core/pipes';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXEditorComponent } from '@acorex/components/editor';
@@ -52,19 +57,17 @@ import { AXTextAreaModule } from '@acorex/components/text-area';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$7 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i3$5 from '@acorex/components/password-box';
+import * as i3$6 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
 import * as i1$8 from '@acorex/components/progress-bar';
 import { AXProgressBarModule } from '@acorex/components/progress-bar';
-import * as i3$6 from '@acorex/components/range-slider';
+import * as i3$7 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import { AXRatePickerComponent } from '@acorex/components/rate-picker';
-import * as i2$3 from '@acorex/components/wysiwyg';
+import * as i2$4 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i5 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i2$4 from '@acorex/components/selection-list';
-import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { first } from 'rxjs';
 import * as i2$5 from '@acorex/components/autocomplete';
 import { AXAutocompleteModule } from '@acorex/components/autocomplete';
@@ -93,8 +96,6 @@ import * as i1$f from '@acorex/components/json-viewer';
 import { AXJsonViewerModule } from '@acorex/components/json-viewer';
 import * as i1$g from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
-import * as i3$7 from '@acorex/components/popover';
-import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
 import * as i5$2 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXSchedulerPickerService, AXSchedulerPickerComponent } from '@acorex/components/scheduler-picker';
@@ -112,7 +113,6 @@ import * as i6$1 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i1$k from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
-import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$8 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
 import * as i2$7 from '@acorex/components/tooltip';
@@ -576,6 +576,25 @@ const AXP_DATE_FORMAT_PROPERTY = createSelectProperty({
     path: 'options.format',
     group: AXP_BEHAVIOR_PROPERTY_GROUP,
 });
+const AXP_DATE_DEPTH_PROPERTY = createSelectProperty({
+    name: 'depth',
+    title: 'Input Depth',
+    dataSource: [
+        { id: 'year', title: 'Year' },
+        { id: 'month', title: 'Month' },
+        { id: 'day', title: 'Day' },
+    ],
+    path: 'options.depth',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: { id: 'day', title: 'Day' },
+});
+/** Max span in days between from/to when filter operation is `between`. */
+const AXP_DATE_RANGE_LIMIT_PROPERTY = createNumberProperty({
+    name: 'limit',
+    title: 'Range Limit (Days)',
+    path: 'options.limit',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
 function booleanDefaultProperty(defaultValue = false) {
     return {
         name: 'defaultValue',
@@ -4263,53 +4282,249 @@ var dateTimeBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPDateTimeBoxWidgetColumnComponent: AXPDateTimeBoxWidgetColumnComponent
 });
 
+class AXPFilterOperationsComponent {
+    constructor() {
+        this.translationService = inject(AXTranslationService);
+        this.selectedOperation = model.required(...(ngDevMode ? [{ debugName: "selectedOperation" }] : []));
+        this.type = input('string', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /** When set and non-empty, only these operators are shown (order preserved). Must match names allowed for `type`. */
+        this.operations = input(undefined, ...(ngDevMode ? [{ debugName: "operations" }] : []));
+        this.rawOperations = computed(() => this.resolveOperations(), ...(ngDevMode ? [{ debugName: "rawOperations" }] : []));
+        this.operationsSignal = signal([], ...(ngDevMode ? [{ debugName: "operationsSignal" }] : []));
+        this.operationItems = computed(() => this.operationsSignal(), ...(ngDevMode ? [{ debugName: "operationItems" }] : []));
+        // Translate operators when raw operations change
+        effect(() => {
+            const ops = this.rawOperations(); // Track changes
+            this.translateOperators(ops);
+        });
+        // Re-translate when language changes
+        this.translationService.langChanges$.subscribe(() => {
+            this.translateOperators(this.rawOperations());
+        });
+    }
+    translateOperators(ops) {
+        Promise.all(ops.map(async (op) => ({
+            ...op,
+            title: op.title.startsWith('@')
+                ? await this.translationService.translateAsync(op.title)
+                : op.title,
+        }))).then((translatedOps) => {
+            this.operationsSignal.set(translatedOps);
+        });
+    }
+    getOperationsForType() {
+        switch (this.type()) {
+            case 'string':
+                return STRING_OPERATORS;
+            case 'number':
+                return NUMBER_OPERATORS;
+            case 'boolean':
+                return BOOLEAN_OPERATORS;
+            case 'datetime':
+                return DATE_OPERATORS;
+            default:
+                return ALL_DEFAULT_OPERATORS;
+        }
+    }
+    resolveOperations() {
+        const base = this.getOperationsForType();
+        const configured = this.operations();
+        if (!configured?.length) {
+            return base;
+        }
+        const byName = new Map(base.map((o) => [o.name, o]));
+        const resolved = [];
+        for (const op of configured) {
+            const canonical = byName.get(op.name);
+            if (canonical) {
+                resolved.push({
+                    ...canonical,
+                    ...op,
+                    hasValue: canonical.hasValue,
+                });
+            }
+        }
+        return resolved.length > 0 ? resolved : base;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operationItems()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$4.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-filter-operations', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXDecoratorModule, AXPopoverModule, AXButtonModule, AXSelectionListModule], template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-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" }]
+        }], 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 }] }], operations: [{ type: i0.Input, args: [{ isSignal: true, alias: "operations", required: false }] }] } });
+
 class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
+    #calendarFormatEffect;
+    #presetTranslateEffect;
+    //#endregion
+    //#region ---- Lifecycle Methods ----
     constructor() {
-        super(...arguments);
+        super();
+        //#region ---- Services & Dependencies ----
         this.validationService = inject(AXValidationService);
         this.settingsService = inject(AXPSettingsService);
+        this.calendarService = inject(AXCalendarService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ---- View References ----
+        this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.filterMode = computed(() => this.options()['filterMode'] ?? false, ...(ngDevMode ? [{ debugName: "filterMode" }] : []));
+        this.filterUi = computed(() => {
+            const ui = this.options()['filterUi'];
+            return ui === 'simple' ? 'simple' : 'presets';
+        }, ...(ngDevMode ? [{ debugName: "filterUi" }] : []));
+        this.resolvedPresets = computed(() => resolveDateFilterPresets(this.options()['filterPresets'], this.options()['filterPresetIds']), ...(ngDevMode ? [{ debugName: "resolvedPresets" }] : []));
+        this.filterOperations = computed(() => {
+            const raw = this.options()['operations'];
+            return raw?.length ? raw : undefined;
+        }, ...(ngDevMode ? [{ debugName: "filterOperations" }] : []));
+        this.selectedManualPreset = computed(() => {
+            const id = this.selectedPresetId();
+            if (!id) {
+                return undefined;
+            }
+            return this.resolvedPresets().find((p) => p.id === id && p.kind === 'manual');
+        }, ...(ngDevMode ? [{ debugName: "selectedManualPreset" }] : []));
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.clearButton = computed(() => this.options()['clearButton'], ...(ngDevMode ? [{ debugName: "clearButton" }] : []));
         this.minValue = computed(() => this.options()['minValue'], ...(ngDevMode ? [{ debugName: "minValue" }] : []));
         this.maxValue = computed(() => this.options()['maxValue'], ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+        this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.dateMode = computed(() => this.options()['mode'] || 'short', ...(ngDevMode ? [{ debugName: "dateMode" }] : []));
         this.format = computed(() => {
             const rawValue = this.options()['format'];
-            if (typeof rawValue == 'string')
+            if (rawValue === 'date' || rawValue === 'time' || rawValue === 'datetime')
                 return rawValue;
-            else if (rawValue && typeof rawValue == 'object')
-                return rawValue['id'];
-            else
-                return 'date';
+            if (rawValue && typeof rawValue === 'object')
+                return rawValue.id;
+            return 'date';
         }, ...(ngDevMode ? [{ debugName: "format" }] : []));
-        this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-        this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        /** Passed to `ax-datetime-box` `[depth]` (`AXCalendarViewType`). */
+        this.inputDepth = computed(() => {
+            if (this.format() === 'time') {
+                return undefined;
+            }
+            const raw = this.options()['depth'];
+            if (raw === 'year' || raw === 'month' || raw === 'day') {
+                return raw;
+            }
+            if (raw && typeof raw === 'object' && 'id' in raw) {
+                const id = raw.id;
+                if (id === 'year' || id === 'month' || id === 'day') {
+                    return id;
+                }
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "inputDepth" }] : []));
         this.internalValue = computed(() => {
             const values = Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()];
             return values;
         }, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+        this.filterValue = computed(() => {
+            const value = this.getValue()?.value;
+            if (typeof value === 'object' && value !== null) {
+                return '';
+            }
+            return this.convertSingleISODateToDate(value);
+        }, ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
+        this.filterRangeValue = computed(() => {
+            const value = this.getValue()?.value;
+            if (typeof value === 'object' && value !== null) {
+                return this.convertRangeISODateToDate(value);
+            }
+            return { from: '', to: '' };
+        }, ...(ngDevMode ? [{ debugName: "filterRangeValue" }] : []));
+        this.operation = computed(() => {
+            const existing = this.getValue()?.operation;
+            if (existing?.type) {
+                return existing;
+            }
+            if (this.filterMode() && this.filterUi() === 'simple') {
+                const ops = this.filterOperations();
+                if (ops?.length === 1) {
+                    return { type: ops[0].name };
+                }
+                return { type: 'equal' };
+            }
+            return existing ?? { type: 'between' };
+        }, ...(ngDevMode ? [{ debugName: "operation" }] : []));
+        this.isValuelessOperation = computed(() => this.operation().type === 'isEmpty' || this.operation().type === 'isNotEmpty', ...(ngDevMode ? [{ debugName: "isValuelessOperation" }] : []));
+        this.rangeLimitDays = computed(() => {
+            const limit = this.options()['limit'];
+            return typeof limit === 'number' && limit > 0 ? limit : undefined;
+        }, ...(ngDevMode ? [{ debugName: "rangeLimitDays" }] : []));
+        this.filterBetweenRangeActive = computed(() => {
+            if (!this.filterMode() || !this.rangeLimitDays()) {
+                return false;
+            }
+            if (this.filterUi() === 'simple') {
+                return this.operation().type === 'between';
+            }
+            return this.selectedManualPreset()?.operationType === 'between';
+        }, ...(ngDevMode ? [{ debugName: "filterBetweenRangeActive" }] : []));
+        this.filterFromMinValue = computed(() => this.resolveFilterFromMinValue(), ...(ngDevMode ? [{ debugName: "filterFromMinValue" }] : []));
+        this.filterFromMaxValue = computed(() => this.resolveFilterFromMaxValue(), ...(ngDevMode ? [{ debugName: "filterFromMaxValue" }] : []));
+        this.filterToMinValue = computed(() => this.resolveFilterToMinValue(), ...(ngDevMode ? [{ debugName: "filterToMinValue" }] : []));
+        this.filterToMaxValue = computed(() => this.resolveFilterToMaxValue(), ...(ngDevMode ? [{ debugName: "filterToMaxValue" }] : []));
+        //#endregion
+        //#region ---- Filter Mode State ----
+        this.selectedPresetId = signal('', ...(ngDevMode ? [{ debugName: "selectedPresetId" }] : []));
+        this.translatedPresets = signal([], ...(ngDevMode ? [{ debugName: "translatedPresets" }] : []));
+        //#endregion
+        //#region ---- Calendar Format ----
         this.calendarFormat = signal('date', ...(ngDevMode ? [{ debugName: "calendarFormat" }] : []));
-        this.#effect = effect(async () => {
+        this.#calendarFormatEffect = effect(async () => {
             let mode = '';
             const dateMode = this.dateMode();
-            if (this.format() == 'date') {
+            if (this.format() === 'date') {
                 const settingKey = dateMode === 'short' ? AXPRegionalSetting.ShortDate : AXPRegionalSetting.LongDate;
                 mode = await this.settingsService.get(settingKey);
             }
-            else if (this.format() == 'time') {
+            else if (this.format() === 'time') {
                 const settingKey = dateMode === 'short' ? AXPRegionalSetting.ShortTime : AXPRegionalSetting.LongTime;
                 mode = await this.settingsService.get(settingKey);
             }
-            else if (this.format() == 'datetime') {
+            else if (this.format() === 'datetime') {
                 const dateKey = dateMode === 'short' ? AXPRegionalSetting.ShortDate : AXPRegionalSetting.LongDate;
                 const timeKey = dateMode === 'short' ? AXPRegionalSetting.ShortTime : AXPRegionalSetting.LongTime;
                 mode = `${await this.settingsService.get(dateKey)} ${await this.settingsService.get(timeKey)}`;
             }
-            console.log('mode', mode);
             this.calendarFormat.set(mode);
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#calendarFormatEffect" }] : []));
+        this.#presetTranslateEffect = effect(() => {
+            if (!this.filterMode() || this.filterUi() !== 'presets') {
+                return;
+            }
+            const presets = this.resolvedPresets();
+            void this.translatePresets(presets);
+        }, ...(ngDevMode ? [{ debugName: "#presetTranslateEffect" }] : []));
+        this.convertSingleISODateToDate = (value) => (value ? new Date(value) : '');
+        this.convertRangeISODateToDate = (value) => ({
+            from: value.from ? new Date(value.from) : '',
+            to: value.to ? new Date(value.to) : '',
+        });
+        this.translationService.langChanges$.subscribe(() => {
+            if (this.filterMode() && this.filterUi() === 'presets') {
+                void this.translatePresets(this.resolvedPresets());
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.filterMode() || this.filterUi() !== 'presets') {
+            return;
+        }
+        const presetId = findManualPresetIdByOperation(this.operation()?.type, this.resolvedPresets());
+        if (presetId) {
+            this.selectedPresetId.set(presetId);
+        }
     }
+    //#endregion
+    //#region ---- Standard Mode Handlers ----
     handleValueChange(e, i) {
         if (e.isUserInteraction) {
             const newValues = this.internalValue().map((item, index) => (i === index ? e.value : item));
@@ -4321,129 +4536,593 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
             }
         }
     }
-    #effect;
     addItem() {
         const newValues = [...this.internalValue(), ''];
         this.setValue(newValues);
     }
     deleteItem(i) {
-        const newValues = this.internalValue().filter((_, index) => index != i);
+        const newValues = this.internalValue().filter((_, index) => index !== i);
         this.setValue(newValues);
     }
+    //#endregion
+    //#region ---- Filter Mode Handlers ----
+    handlePresetChange(e) {
+        if (e.isUserInteraction) {
+            this.selectedPresetId.set(e.value);
+            const nextValue = applyDateFilterPreset(e.value, this.calendarService);
+            this.setValue(nextValue);
+        }
+    }
+    handleOperationChange(operationType) {
+        this.setValue({
+            value: this.getValue()?.value,
+            operation: { type: operationType },
+        });
+    }
+    handleFilterValueChange(e, type) {
+        if (e.isUserInteraction) {
+            const operation = untracked(this.operation);
+            const currentRange = this.filterRangeValue();
+            switch (type) {
+                case 'self':
+                    this.setValue({ operation, value: e.value?.toISOString() });
+                    break;
+                case 'to': {
+                    const from = currentRange.from;
+                    this.setValue({
+                        operation,
+                        value: {
+                            from: from instanceof Date ? from.toISOString() : from || undefined,
+                            to: e.value?.toISOString(),
+                        },
+                    });
+                    break;
+                }
+                case 'from': {
+                    const to = currentRange.to;
+                    this.setValue({
+                        operation,
+                        value: {
+                            from: e.value?.toISOString(),
+                            to: to instanceof Date ? to.toISOString() : to || undefined,
+                        },
+                    });
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+    }
+    //#endregion
+    //#region ---- Utility Methods ----
+    async translatePresets(presets) {
+        const translated = await Promise.all(presets.map(async (preset) => ({
+            id: preset.id,
+            title: preset.title.startsWith('@')
+                ? await this.translationService.translateAsync(preset.title)
+                : preset.title,
+        })));
+        this.translatedPresets.set(translated);
+    }
+    toFilterDate(value) {
+        if (value === '' || value === null || value === undefined) {
+            return undefined;
+        }
+        const date = value instanceof Date ? value : new Date(value);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    addCalendarDays(date, days) {
+        return this.calendarService.calendar.add(date, 'day', days).date;
+    }
+    mergeMinBound(staticMin, dynamicMin) {
+        const staticDate = staticMin ? new Date(staticMin) : undefined;
+        const staticValid = staticDate && !Number.isNaN(staticDate.getTime());
+        if (dynamicMin && staticValid) {
+            return staticDate > dynamicMin ? staticDate : dynamicMin;
+        }
+        return dynamicMin ?? staticMin;
+    }
+    mergeMaxBound(staticMax, dynamicMax) {
+        const staticDate = staticMax ? new Date(staticMax) : undefined;
+        const staticValid = staticDate && !Number.isNaN(staticDate.getTime());
+        if (dynamicMax && staticValid) {
+            return staticDate < dynamicMax ? staticDate : dynamicMax;
+        }
+        return dynamicMax ?? staticMax;
+    }
+    resolveFilterFromMinValue() {
+        if (!this.filterBetweenRangeActive()) {
+            return this.minValue() || undefined;
+        }
+        const to = this.toFilterDate(this.filterRangeValue().to);
+        if (!to) {
+            return this.minValue() || undefined;
+        }
+        const limit = this.rangeLimitDays();
+        return this.mergeMinBound(this.minValue(), this.addCalendarDays(to, -limit));
+    }
+    resolveFilterFromMaxValue() {
+        if (!this.filterBetweenRangeActive()) {
+            return this.maxValue() || undefined;
+        }
+        const to = this.toFilterDate(this.filterRangeValue().to);
+        if (!to) {
+            return this.maxValue() || undefined;
+        }
+        return this.mergeMaxBound(this.maxValue(), to);
+    }
+    resolveFilterToMinValue() {
+        if (!this.filterBetweenRangeActive()) {
+            return this.minValue() || undefined;
+        }
+        const from = this.toFilterDate(this.filterRangeValue().from);
+        if (!from) {
+            return this.minValue() || undefined;
+        }
+        return this.mergeMinBound(this.minValue(), from);
+    }
+    resolveFilterToMaxValue() {
+        if (!this.filterBetweenRangeActive()) {
+            return this.maxValue() || undefined;
+        }
+        const from = this.toFilterDate(this.filterRangeValue().from);
+        if (!from) {
+            return this.maxValue() || undefined;
+        }
+        const limit = this.rangeLimitDays();
+        return this.mergeMaxBound(this.maxValue(), this.addCalendarDays(from, limit));
+    }
+    focus() {
+        this.selectBox()?.focus();
+    }
+    //#endregion
+    //#region ---- Host Binding ----
     get __class() {
         const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
+        cls['ax-block'] = true;
+        cls['ax-flex-1'] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @for (datetime of internalValue(); track $index) {
-        <ax-datetime-box
-          class="ax-col-span-12"
-          [ngModel]="datetime"
-          [picker]="format()"
-          (onValueChanged)="handleValueChange($event, $index)"
-          [minValue]="minValue()"
-          [maxValue]="maxValue()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [format]="calendarFormat()"
-          [placeholder]="placeholder()"
-        >
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPDateTimeBoxWidgetEditComponent, isStandalone: true, selector: "axp-date-time-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (filterMode()) {
+      @if (filterUi() === 'simple') {
+        <div class="ax-flex ax-items-center ax-w-full">
+          @if (operation().type === 'between') {
+            <div class="ax-flex-1 ax-flex ax-gap-2">
+              <ax-datetime-box
+                #dateTimeBox
+                class="ax-w-full"
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterFromMinValue()"
+                [maxValue]="filterFromMaxValue()"
+                [placeholder]="'@general:terms.common.from' | translate | async"
+                [disabled]="isValuelessOperation()"
+                [ngModel]="filterRangeValue().from"
+                (onValueChanged)="handleFilterValueChange($event, 'from')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+              <ax-datetime-box
+                class="ax-w-full"
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterToMinValue()"
+                [maxValue]="filterToMaxValue()"
+                [placeholder]="'@general:terms.common.to' | translate | async"
+                [disabled]="isValuelessOperation()"
+                [ngModel]="filterRangeValue().to"
+                (onValueChanged)="handleFilterValueChange($event, 'to')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+            </div>
+          } @else {
+            <ax-datetime-box
+              #dateTimeBox
+              class="ax-flex-1"
+              [format]="calendarFormat()"
+              [picker]="format()"
+              [depth]="inputDepth()"
+              [placeholder]="(placeholder() | translate | async) ?? ''"
+              [disabled]="isValuelessOperation()"
+              [ngModel]="filterValue()"
+              (onValueChanged)="handleFilterValueChange($event, 'self')"
+            >
+              <ax-clear-button></ax-clear-button>
+              @for (validation of validationRules(); track $index) {
+                <ax-validation-rule
+                  [rule]="validation.rule"
+                  [message]="validation.options?.message"
+                  [options]="validation.options"
+                ></ax-validation-rule>
+              }
+            </ax-datetime-box>
           }
-          @if (clearButton()) {
-            <ax-clear-button></ax-clear-button>
+          <axp-filter-operations
+            type="datetime"
+            [operations]="filterOperations()"
+            [selectedOperation]="operation().type"
+            (selectedOperationChange)="handleOperationChange($event)"
+          ></axp-filter-operations>
+        </div>
+      } @else {
+        <div class="ax-flex ax-flex-col ax-items-center ax-w-full">
+          @if (resolvedPresets().length) {
+            <ax-select-box
+              #selectBox
+              class="ax-w-full"
+              [dataSource]="translatedPresets()"
+              [valueField]="'id'"
+              [textField]="'title'"
+              [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
+              [ngModel]="selectedPresetId()"
+              (onValueChanged)="handlePresetChange($event)"
+            >
+              <ax-clear-button></ax-clear-button>
+            </ax-select-box>
           }
-          @if (multiple()) {
-            <ax-suffix>
-              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-                <ax-icon class="far fa-trash"> </ax-icon>
-              </ax-button>
-            </ax-suffix>
+          @if (selectedManualPreset()?.operationType === 'between') {
+            <div class="ax-flex ax-gap-2 ax-mt-2 ax-w-full">
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterFromMinValue()"
+                [maxValue]="filterFromMaxValue()"
+                [placeholder]="'@general:terms.common.from' | translate | async"
+                [ngModel]="filterRangeValue().from"
+                (onValueChanged)="handleFilterValueChange($event, 'from')"
+              >
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+                <ax-clear-button></ax-clear-button>
+              </ax-datetime-box>
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterToMinValue()"
+                [maxValue]="filterToMaxValue()"
+                [placeholder]="'@general:terms.common.to' | translate | async"
+                [ngModel]="filterRangeValue().to"
+                (onValueChanged)="handleFilterValueChange($event, 'to')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+            </div>
           }
-        </ax-datetime-box>
-      }
-      @if (multiple()) {
-        <ax-button
-          class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-          [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-          look="twotone"
-          (onClick)="addItem()"
-          [disabled]="disabled()"
-        ></ax-button>
+          @if (
+            selectedManualPreset()?.operationType === 'greaterThan' ||
+            selectedManualPreset()?.operationType === 'lessThan'
+          ) {
+            <div class="ax-w-full ax-mt-2">
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [ngModel]="filterValue()"
+                (onValueChanged)="handleFilterValueChange($event, 'self')"
+              >
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+                <ax-clear-button></ax-clear-button>
+              </ax-datetime-box>
+            </div>
+          }
+        </div>
       }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$4.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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 }); }
+    } @else {
+      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+        @for (datetime of internalValue(); track $index) {
+          <ax-datetime-box
+            class="ax-col-span-12"
+            [ngModel]="datetime"
+            [picker]="format()"
+            [depth]="inputDepth()"
+            (onValueChanged)="handleValueChange($event, $index)"
+            [minValue]="minValue()"
+            [maxValue]="maxValue()"
+            [disabled]="disabled()"
+            [readonly]="readonly()"
+            [format]="calendarFormat()"
+            [placeholder]="placeholder()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+            @if (clearButton()) {
+              <ax-clear-button></ax-clear-button>
+            }
+            @if (multiple()) {
+              <ax-suffix>
+                <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                  <ax-icon class="far fa-trash"> </ax-icon>
+                </ax-button>
+              </ax-suffix>
+            }
+          </ax-datetime-box>
+        }
+        @if (multiple()) {
+          <ax-button
+            class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+            [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+            look="twotone"
+            (onClick)="addItem()"
+            [disabled]="disabled()"
+          ></ax-button>
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$5.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-date-time-box-widget-edit',
                     template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      @for (datetime of internalValue(); track $index) {
-        <ax-datetime-box
-          class="ax-col-span-12"
-          [ngModel]="datetime"
-          [picker]="format()"
-          (onValueChanged)="handleValueChange($event, $index)"
-          [minValue]="minValue()"
-          [maxValue]="maxValue()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [format]="calendarFormat()"
-          [placeholder]="placeholder()"
-        >
-          @for (validation of validationRules(); track $index) {
-            <ax-validation-rule
-              [rule]="validation.rule"
-              [message]="validation.options?.message"
-              [options]="validation.options"
-            ></ax-validation-rule>
+    @if (filterMode()) {
+      @if (filterUi() === 'simple') {
+        <div class="ax-flex ax-items-center ax-w-full">
+          @if (operation().type === 'between') {
+            <div class="ax-flex-1 ax-flex ax-gap-2">
+              <ax-datetime-box
+                #dateTimeBox
+                class="ax-w-full"
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterFromMinValue()"
+                [maxValue]="filterFromMaxValue()"
+                [placeholder]="'@general:terms.common.from' | translate | async"
+                [disabled]="isValuelessOperation()"
+                [ngModel]="filterRangeValue().from"
+                (onValueChanged)="handleFilterValueChange($event, 'from')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+              <ax-datetime-box
+                class="ax-w-full"
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterToMinValue()"
+                [maxValue]="filterToMaxValue()"
+                [placeholder]="'@general:terms.common.to' | translate | async"
+                [disabled]="isValuelessOperation()"
+                [ngModel]="filterRangeValue().to"
+                (onValueChanged)="handleFilterValueChange($event, 'to')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+            </div>
+          } @else {
+            <ax-datetime-box
+              #dateTimeBox
+              class="ax-flex-1"
+              [format]="calendarFormat()"
+              [picker]="format()"
+              [depth]="inputDepth()"
+              [placeholder]="(placeholder() | translate | async) ?? ''"
+              [disabled]="isValuelessOperation()"
+              [ngModel]="filterValue()"
+              (onValueChanged)="handleFilterValueChange($event, 'self')"
+            >
+              <ax-clear-button></ax-clear-button>
+              @for (validation of validationRules(); track $index) {
+                <ax-validation-rule
+                  [rule]="validation.rule"
+                  [message]="validation.options?.message"
+                  [options]="validation.options"
+                ></ax-validation-rule>
+              }
+            </ax-datetime-box>
           }
-          @if (clearButton()) {
-            <ax-clear-button></ax-clear-button>
+          <axp-filter-operations
+            type="datetime"
+            [operations]="filterOperations()"
+            [selectedOperation]="operation().type"
+            (selectedOperationChange)="handleOperationChange($event)"
+          ></axp-filter-operations>
+        </div>
+      } @else {
+        <div class="ax-flex ax-flex-col ax-items-center ax-w-full">
+          @if (resolvedPresets().length) {
+            <ax-select-box
+              #selectBox
+              class="ax-w-full"
+              [dataSource]="translatedPresets()"
+              [valueField]="'id'"
+              [textField]="'title'"
+              [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
+              [ngModel]="selectedPresetId()"
+              (onValueChanged)="handlePresetChange($event)"
+            >
+              <ax-clear-button></ax-clear-button>
+            </ax-select-box>
           }
-          @if (multiple()) {
-            <ax-suffix>
-              <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
-                <ax-icon class="far fa-trash"> </ax-icon>
-              </ax-button>
-            </ax-suffix>
+          @if (selectedManualPreset()?.operationType === 'between') {
+            <div class="ax-flex ax-gap-2 ax-mt-2 ax-w-full">
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterFromMinValue()"
+                [maxValue]="filterFromMaxValue()"
+                [placeholder]="'@general:terms.common.from' | translate | async"
+                [ngModel]="filterRangeValue().from"
+                (onValueChanged)="handleFilterValueChange($event, 'from')"
+              >
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+                <ax-clear-button></ax-clear-button>
+              </ax-datetime-box>
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [minValue]="filterToMinValue()"
+                [maxValue]="filterToMaxValue()"
+                [placeholder]="'@general:terms.common.to' | translate | async"
+                [ngModel]="filterRangeValue().to"
+                (onValueChanged)="handleFilterValueChange($event, 'to')"
+              >
+                <ax-clear-button></ax-clear-button>
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+              </ax-datetime-box>
+            </div>
           }
-        </ax-datetime-box>
-      }
-      @if (multiple()) {
-        <ax-button
-          class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
-          [text]="!internalValue().length ? 'Add New' : 'Add Another'"
-          look="twotone"
-          (onClick)="addItem()"
-          [disabled]="disabled()"
-        ></ax-button>
+          @if (
+            selectedManualPreset()?.operationType === 'greaterThan' ||
+            selectedManualPreset()?.operationType === 'lessThan'
+          ) {
+            <div class="ax-w-full ax-mt-2">
+              <ax-datetime-box
+                [format]="calendarFormat()"
+                [picker]="format()"
+                [depth]="inputDepth()"
+                [ngModel]="filterValue()"
+                (onValueChanged)="handleFilterValueChange($event, 'self')"
+              >
+                @for (validation of validationRules(); track $index) {
+                  <ax-validation-rule
+                    [rule]="validation.rule"
+                    [message]="validation.options?.message"
+                    [options]="validation.options"
+                  ></ax-validation-rule>
+                }
+                <ax-clear-button></ax-clear-button>
+              </ax-datetime-box>
+            </div>
+          }
+        </div>
       }
-    </div>
+    } @else {
+      <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+        @for (datetime of internalValue(); track $index) {
+          <ax-datetime-box
+            class="ax-col-span-12"
+            [ngModel]="datetime"
+            [picker]="format()"
+            [depth]="inputDepth()"
+            (onValueChanged)="handleValueChange($event, $index)"
+            [minValue]="minValue()"
+            [maxValue]="maxValue()"
+            [disabled]="disabled()"
+            [readonly]="readonly()"
+            [format]="calendarFormat()"
+            [placeholder]="placeholder()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+            @if (clearButton()) {
+              <ax-clear-button></ax-clear-button>
+            }
+            @if (multiple()) {
+              <ax-suffix>
+                <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
+                  <ax-icon class="far fa-trash"> </ax-icon>
+                </ax-button>
+              </ax-suffix>
+            }
+          </ax-datetime-box>
+        }
+        @if (multiple()) {
+          <ax-button
+            class="ax-col-start-9 lg:ax-col-start-10 xl:ax-col-start-11 ax-col-end-13"
+            [text]="!internalValue().length ? 'Add New' : 'Add Another'"
+            look="twotone"
+            (onClick)="addItem()"
+            [disabled]="disabled()"
+          ></ax-button>
+        }
+      </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
+                        CommonModule,
                         FormsModule,
                         AXFormModule,
                         AXValidationModule,
                         AXDateTimeBoxModule,
                         AXButtonModule,
                         AXDecoratorModule,
-                        AXValidationModule,
+                        AXSelectBoxModule,
+                        AXTranslationModule,
+                        AXPFilterOperationsComponent,
                     ],
                 }]
-        }], propDecorators: { __class: [{
+        }], ctorParameters: () => [], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }], __class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -4552,6 +5231,8 @@ const AXPDateTimeBoxWidget = {
         AXP_ALLOW_MULTIPLE_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,
@@ -5623,7 +6304,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$5.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$2.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$6.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$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5951,7 +6632,7 @@ class AXPProgressBarWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$6.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$7.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: "20.3.19", ngImport: i0, type: AXPProgressBarWidgetEditComponent, decorators: [{
             type: Component,
@@ -6560,7 +7241,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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$3.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$3.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$3.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$3.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$3.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$3.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$3.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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$4.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$4.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$4.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$4.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$4.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$4.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$4.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$4.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$4.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -7299,7 +7980,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent
       [readonly]="readonly()"
     >
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7393,7 +8074,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -13343,7 +14024,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPQrcodeWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-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=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-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=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-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=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-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=\"ax-flex ax-justify-end ax-gap-2 ax-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=\"ax-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.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=\"ax-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$6.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPQrcodeWidgetEditComponent, isStandalone: true, selector: "axp-qrcode-widget-edit", host: { classAttribute: "ax-block ax-flex-1" }, usesInheritance: true, ngImport: i0, template: "<!-- Main Container -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-p-3 ax-w-fit\">\n  <div class=\"ax-flex ax-justify-center\">\n    <!-- QR Code Container -->\n    <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-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=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-text-center\"\n          [style.width.px]=\"size()\"\n          [style.height.px]=\"size()\"\n        >\n          <ax-icon icon=\"fa-light fa-qrcode\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-3\"></ax-icon>\n          <div class=\"ax-text-sm ax-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=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-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=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-p-5 ax-w-full sm:ax-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=\"ax-flex ax-justify-end ax-gap-2 ax-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=\"ax-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.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=\"ax-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$6.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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$4.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i5$2.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -14339,7 +15020,7 @@ class AXPStatusChipComponent {
         </div>
       </ax-popover>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$4.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPStatusChipComponent, decorators: [{
             type: Component,
@@ -19372,7 +20053,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-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] ? 'ax-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 ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-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=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n    <span class=\"ax-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 ax-max-w-12\"\n    ></ax-number-box>\n    <span class=\"ax-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 ax-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=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-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=\"ax-grid ax-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 ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n            <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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 ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-24\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-24\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"ax-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 ax-min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-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{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$6.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-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] ? 'ax-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 ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-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=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n    <span class=\"ax-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 ax-max-w-12\"\n    ></ax-number-box>\n    <span class=\"ax-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 ax-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=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-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=\"ax-grid ax-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 ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n            <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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 ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-24\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-24\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"ax-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 ax-min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-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{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$7.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$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -19972,7 +20653,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-1 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"ax-min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"ax-flex ax-justify-start ax-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=\"ax-min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\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=\"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 class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-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 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=\"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 width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 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=\"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 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=\"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 class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-sm ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\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"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: 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.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$6.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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$2.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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-1 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"ax-min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"ax-flex ax-justify-start ax-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=\"ax-min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-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)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\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=\"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 class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-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 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=\"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 width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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 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=\"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 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=\"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 class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-sm ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\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=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\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"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: 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.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$7.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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$2.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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -20332,7 +21013,7 @@ class AXPDataSourceOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     //#region ---- Lifecycle ----
     #init;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options ax-flex ax-flex-col ax-gap-3 ax-py-2\">\n  <!-- 1. Mode: exists vs array -->\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-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  <!-- 2. Select existing data source (only when mode is exists) -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-select-box [dataSource]=\"definitionsDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onDefinitionChange($event)\" valueField=\"name\" textField=\"title\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- 3. Columns and Rows buttons (only when mode is array) -->\n  @if (dataSourceMode() === 'array') {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.inlineData | translate | async }}</span>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n      <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n        [text]=\"((I18N.columnsWithCount | translate: { params: { count: inlineColumnsCount() } }) | async) ?? ''\"\n        (onClick)=\"openColumnsEditor()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-columns\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n      <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n        [text]=\"((I18N.rowsWithCount | translate: { params: { count: inlineRowsCount() } }) | async) ?? ''\"\n        [disabled]=\"!canOpenRowsEditor()\" (onClick)=\"openRowsEditor()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-table-list\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <!-- 4. valueField select (wrapped with key to re-render when dataSource changes) -->\n  @if (fieldSelectsKey()) {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-select-box [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n\n  <!-- 5. textField select (wrapped with key to re-render when dataSource changes) -->\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-select-box [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- 6. Filter editor button (only when mode is exists and referenced definition has filters) -->\n  @if (dataSourceMode() === 'exists' && (selectedDefinition()?.filters?.length ?? 0) > 0) {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.filters | translate | async }}</span>\n    @if (filterCount() === 0) {\n    <ax-button look=\"twotone\" color=\"default\" size=\"sm\" [text]=\"(I18N.filtersButtonEmpty | translate | async) ?? ''\"\n      (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    } @else {\n    <ax-button look=\"twotone\" color=\"default\" size=\"sm\"\n      [text]=\"((I18N.filtersButtonWithCount | translate: { params: { count: filterCount() } }) | async) ?? ''\"\n      (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </div>\n  }\n</div>", styles: [".axp-data-source-options{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPDataSourceOptionsWidgetEditComponent, isStandalone: true, selector: "axp-data-source-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-source-options ax-flex ax-flex-col ax-gap-3 ax-py-2\">\n  <!-- 1. Mode: exists vs array -->\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-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  <!-- 2. Select existing data source (only when mode is exists) -->\n  @if (dataSourceMode() === 'exists') {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.dataSource | translate | async }}</span>\n    <ax-select-box [dataSource]=\"definitionsDataSource\" [ngModel]=\"getValue()['dataSource']\"\n      (onValueChanged)=\"onDefinitionChange($event)\" valueField=\"name\" textField=\"title\"\n      [placeholder]=\"(I18N.dataSourcePlaceholder | translate | async) ?? ''\">\n      <ax-search-box></ax-search-box>\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- 3. Columns and Rows buttons (only when mode is array) -->\n  @if (dataSourceMode() === 'array') {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.inlineData | translate | async }}</span>\n    <div class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\">\n      <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n        [text]=\"((I18N.columnsWithCount | translate: { params: { count: inlineColumnsCount() } }) | async) ?? ''\"\n        (onClick)=\"openColumnsEditor()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-columns\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n      <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n        [text]=\"((I18N.rowsWithCount | translate: { params: { count: inlineRowsCount() } }) | async) ?? ''\"\n        [disabled]=\"!canOpenRowsEditor()\" (onClick)=\"openRowsEditor()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-table-list\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <!-- 4. valueField select (wrapped with key to re-render when dataSource changes) -->\n  @if (fieldSelectsKey()) {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.valueField | translate | async }}</span>\n    <ax-select-box [dataSource]=\"valueFieldDataSource()\" [ngModel]=\"getValue()['valueField']\"\n      (onValueChanged)=\"onValueFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.valueFieldPlaceholderDisabled : I18N.valueFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n\n  <!-- 5. textField select (wrapped with key to re-render when dataSource changes) -->\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.textField | translate | async }}</span>\n    <ax-select-box [dataSource]=\"textFieldDataSource()\" [ngModel]=\"getValue()['textField']\"\n      (onValueChanged)=\"onTextFieldChange($event)\" valueField=\"value\" textField=\"text\"\n      [disabled]=\"valueTextFieldDisabled()\"\n      [placeholder]=\"((valueTextFieldDisabled() ? I18N.textFieldPlaceholderDisabled : I18N.textFieldPlaceholder) | translate | async) ?? ''\">\n      <ax-clear-button></ax-clear-button>\n    </ax-select-box>\n  </div>\n  }\n\n  <!-- 6. Filter editor button (only when mode is exists and referenced definition has filters) -->\n  @if (dataSourceMode() === 'exists' && (selectedDefinition()?.filters?.length ?? 0) > 0) {\n  <div class=\"ax-flex ax-flex-col ax-gap-2\">\n    <span class=\"ax-font-medium ax-text-sm\">{{ I18N.filters | translate | async }}</span>\n    @if (filterCount() === 0) {\n    <ax-button look=\"twotone\" color=\"default\" size=\"sm\" [text]=\"(I18N.filtersButtonEmpty | translate | async) ?? ''\"\n      (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    } @else {\n    <ax-button look=\"twotone\" color=\"default\" size=\"sm\"\n      [text]=\"((I18N.filtersButtonWithCount | translate: { params: { count: filterCount() } }) | async) ?? ''\"\n      (onClick)=\"openFilterEditor()\" class=\"ax-w-full\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-filter\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </div>\n  }\n</div>", styles: [".axp-data-source-options{min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDataSourceOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -20378,7 +21059,7 @@ class AXPDirectionWidgetEditComponent extends AXPValueWidgetComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDirectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2\">\n  <div class=\"ax-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=\"ax-flex ax-items-center\">\n          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-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"], dependencies: [{ kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2\">\n  <div class=\"ax-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=\"ax-flex ax-items-center\">\n          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-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"], dependencies: [{ kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDirectionWidgetEditComponent, decorators: [{
             type: Component,
@@ -20833,7 +21514,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-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=\"ax-flex ax-items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-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=\"ax-grid ax-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=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span class=\"ax-order-1\">X:</span>\n      <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- <ax-select-box\n          [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n          [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n          (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n          (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box> -->\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span class=\"ax-order-3\">Y:</span>\n      <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"ax-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 ax-max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-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=\"ax-w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$6.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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-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=\"ax-flex ax-items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-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=\"ax-grid ax-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=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-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=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span class=\"ax-order-1\">X:</span>\n      <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '4' : '2'\">\n        <!-- <ax-select-box\n          [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n          [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n          (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n          (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box> -->\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span class=\"ax-order-3\">Y:</span>\n      <div class=\"ax-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-select-box\n          class=\"ax-sm\"\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"ax-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 ax-max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-h-12\">\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"ax-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 ax-min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-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=\"ax-w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$7.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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -21275,7 +21956,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { 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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$4.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { 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$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.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: "20.3.19", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -24293,7 +24974,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.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"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.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"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$4.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -24775,461 +25456,6 @@ const AXPBooleanFilterWidget = {
     },
 };
 
-class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.calendarService = inject(AXCalendarService);
-        this.settingsService = inject(AXPSettingsService);
-        this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
-        this.value = computed(() => this.convertISODateToDate(this.getValue()?.value), ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.operation = computed(() => this.getValue()?.operation, ...(ngDevMode ? [{ debugName: "operation" }] : []));
-        this.filterTypeSelectedItem = signal('', ...(ngDevMode ? [{ debugName: "filterTypeSelectedItem" }] : []));
-        this.dateMode = computed(() => this.options()['mode'] || 'short', ...(ngDevMode ? [{ debugName: "dateMode" }] : []));
-        this.format = computed(() => {
-            const rawValue = this.options()['format'];
-            if (typeof rawValue == 'string')
-                return rawValue;
-            else if (rawValue && typeof rawValue == 'object')
-                return rawValue['id'];
-            else
-                return 'date';
-        }, ...(ngDevMode ? [{ debugName: "format" }] : []));
-        this.calendarFormat = signal('date', ...(ngDevMode ? [{ debugName: "calendarFormat" }] : []));
-        this.#effect = effect(async () => {
-            let mode = '';
-            if (this.format() == 'date') {
-                mode = await this.settingsService.get(`regional:${this.dateMode()}-date`);
-            }
-            else if (this.format() == 'time') {
-                mode = await this.settingsService.get(`regional:${this.dateMode()}-time`);
-            }
-            else if (this.format() == 'datetime') {
-                mode = `${await this.settingsService.get(`regional:${this.dateMode()}-date`)} ${await this.settingsService.get(`regional:${this.dateMode()}-time`)}`;
-            }
-            this.calendarFormat.set(mode);
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        this.filterTypeDataSource = [
-            'Today',
-            'This Week',
-            'This Month',
-            'Yesterday',
-            'Last Week',
-            'Last Month',
-            'Tomorrow',
-            'Next Week',
-            'Next Month',
-            'Between',
-            'Greater Than',
-            'Less Than',
-        ];
-        this.convertISODateToDate = (value) => {
-            if (typeof value === 'object') {
-                return { from: value.from ? new Date(value.from) : '', to: value.to ? new Date(value.to) : '' };
-            }
-            else {
-                return value ? new Date(value) : '';
-            }
-        };
-        this.formatCamelCaseToUpper = (input) => input?.replace(/([a-z])([A-Z])/g, '$1 $2')?.replace(/\b\w/g, (char) => char.toUpperCase());
-    }
-    #effect;
-    ngAfterViewInit() {
-        const availableTypes = ['between', 'greaterThan', 'lessThan'];
-        if (availableTypes.includes(this.operation())) {
-            this.filterTypeSelectedItem.set(this.formatCamelCaseToUpper(this.operation()));
-        }
-    }
-    handleFilterTypeSelectedItemChange(e) {
-        console.log('handleFilterTypeSelectedItemChange', e);
-        if (e.isUserInteraction) {
-            this.filterTypeSelectedItem.set(e.value);
-            this.setDateValue();
-        }
-    }
-    setDateValue() {
-        const currentDate = this.calendarService.now().date;
-        const calendar = this.calendarService.calendar;
-        switch (this.filterTypeSelectedItem()) {
-            case 'Today':
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: calendar.startOf(currentDate, 'day').date.toISOString(),
-                        to: calendar.endOf(currentDate, 'day').date.toISOString(),
-                    },
-                });
-                break;
-            case 'This Week':
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: calendar.startOf(currentDate, 'week').date.toISOString(),
-                        to: calendar.endOf(currentDate, 'week').date.toISOString(),
-                    },
-                });
-                break;
-            case 'This Month':
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: calendar.startOf(currentDate, 'month').date.toISOString(),
-                        to: calendar.endOf(currentDate, 'month').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Yesterday':
-                const yesterDay = calendar.add(currentDate, 'day', -1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: yesterDay.startOf('day').date.toISOString(),
-                        to: yesterDay.endOf('day').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Last Week':
-                const lastWeek = calendar.add(currentDate, 'week', -1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: lastWeek.startOf('week').date.toISOString(),
-                        to: lastWeek.endOf('week').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Last Month':
-                const lastMonth = calendar.add(currentDate, 'month', -1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: lastMonth.startOf('month').date.toISOString(),
-                        to: lastMonth.endOf('month').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Tomorrow':
-                const tomorrow = calendar.add(currentDate, 'day', 1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: tomorrow.startOf('day').date.toISOString(),
-                        to: tomorrow.endOf('day').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Next Week':
-                const nextWeek = calendar.add(currentDate, 'week', 1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: nextWeek.startOf('week').date.toISOString(),
-                        to: nextWeek.endOf('week').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Next Month':
-                const nextMonth = calendar.add(currentDate, 'month', -1);
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: nextMonth.startOf('month').date.toISOString(),
-                        to: nextMonth.endOf('month').date.toISOString(),
-                    },
-                });
-                break;
-            case 'Between':
-                this.setValue(undefined);
-                break;
-            case 'Greater Than':
-                this.setValue({
-                    operation: { type: 'greaterThan' },
-                });
-                break;
-            case 'Less Than':
-                this.setValue({
-                    operation: { type: 'lessThan' },
-                });
-                break;
-            default:
-                this.setValue({
-                    operation: { type: 'between' },
-                    value: {
-                        from: '',
-                        to: '',
-                    },
-                });
-                break;
-        }
-    }
-    handleValueChange(e, type) {
-        if (e.isUserInteraction) {
-            const operation = untracked(this.operation);
-            switch (type) {
-                case 'self':
-                    this.setValue({ operation, value: e.value?.toISOString() });
-                    break;
-                case 'to':
-                    const from = this.value().from || undefined;
-                    this.setValue({
-                        operation,
-                        value: { from: from?.toISOString(), to: e.value?.toISOString() },
-                    });
-                    break;
-                case 'from':
-                    const to = this.value().to || undefined;
-                    this.setValue({
-                        operation,
-                        value: { from: e.value?.toISOString(), to: to?.toISOString() },
-                    });
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-    focus() {
-        this.selectBox()?.focus();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPDateTimeFilterWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-flex-col ax-items-center">
-      <ax-select-box
-        #selectBox
-        [dataSource]="filterTypeDataSource"
-        [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
-        [ngModel]="filterTypeSelectedItem()"
-        (onValueChanged)="handleFilterTypeSelectedItemChange($event)"
-      >
-        <ax-clear-button></ax-clear-button>
-      </ax-select-box>
-      @if (filterTypeSelectedItem() === 'Between') {
-        <div class="ax-flex ax-gap-2 ax-mt-2">
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [placeholder]="'@general:terms.common.from' | translate | async"
-            [ngModel]="value()?.from"
-            (onValueChanged)="handleValueChange($event, 'from')"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            <ax-clear-button></ax-clear-button>
-          </ax-datetime-box>
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [placeholder]="'@general:terms.common.to' | translate | async"
-            [ngModel]="value()?.to"
-            (onValueChanged)="handleValueChange($event, 'to')"
-          >
-            <ax-clear-button></ax-clear-button>
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-          </ax-datetime-box>
-        </div>
-      }
-      @if (filterTypeSelectedItem() === 'Greater Than' || filterTypeSelectedItem() === 'Less Than') {
-        <div class="ax-w-full ax-mt-2">
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [ngModel]="value()"
-            (onValueChanged)="handleValueChange($event, 'self')"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            <ax-clear-button></ax-clear-button>
-          </ax-datetime-box>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$4.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="ax-flex ax-flex-col ax-items-center">
-      <ax-select-box
-        #selectBox
-        [dataSource]="filterTypeDataSource"
-        [placeholder]="('@general:actions.select.title' | translate | async) ?? ''"
-        [ngModel]="filterTypeSelectedItem()"
-        (onValueChanged)="handleFilterTypeSelectedItemChange($event)"
-      >
-        <ax-clear-button></ax-clear-button>
-      </ax-select-box>
-      @if (filterTypeSelectedItem() === 'Between') {
-        <div class="ax-flex ax-gap-2 ax-mt-2">
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [placeholder]="'@general:terms.common.from' | translate | async"
-            [ngModel]="value()?.from"
-            (onValueChanged)="handleValueChange($event, 'from')"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            <ax-clear-button></ax-clear-button>
-          </ax-datetime-box>
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [placeholder]="'@general:terms.common.to' | translate | async"
-            [ngModel]="value()?.to"
-            (onValueChanged)="handleValueChange($event, 'to')"
-          >
-            <ax-clear-button></ax-clear-button>
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-          </ax-datetime-box>
-        </div>
-      }
-      @if (filterTypeSelectedItem() === 'Greater Than' || filterTypeSelectedItem() === 'Less Than') {
-        <div class="ax-w-full ax-mt-2">
-          <ax-datetime-box
-            [format]="calendarFormat()"
-            [ngModel]="value()"
-            (onValueChanged)="handleValueChange($event, 'self')"
-          >
-            @for (validation of validationRules(); track $index) {
-              <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              ></ax-validation-rule>
-            }
-            <ax-clear-button></ax-clear-button>
-          </ax-datetime-box>
-        </div>
-      }
-    </div>
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        AXFormModule,
-                        AXValidationModule,
-                        AXTranslationModule,
-                        AXSelectBoxModule,
-                        AXDateTimeBoxModule,
-                        AXDecoratorModule,
-                    ],
-                }]
-        }], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }] } });
-
-var dateTimeFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPDateTimeFilterWidgetEditComponent: AXPDateTimeFilterWidgetEditComponent
-});
-
-const AXPDateTimeFilterWidget = {
-    name: 'datetime-filter',
-    title: 'Date Time 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 dateTimeFilterWidgetEdit_component; }).then((c) => c.AXPDateTimeFilterWidgetEditComponent),
-        },
-    },
-};
-
-class AXPFilterOperationsComponent {
-    constructor() {
-        this.translationService = inject(AXTranslationService);
-        this.selectedOperation = model.required(...(ngDevMode ? [{ debugName: "selectedOperation" }] : []));
-        this.type = input('string', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        /** When set and non-empty, only these operators are shown (order preserved). Must match names allowed for `type`. */
-        this.operations = input(undefined, ...(ngDevMode ? [{ debugName: "operations" }] : []));
-        this.rawOperations = computed(() => this.resolveOperations(), ...(ngDevMode ? [{ debugName: "rawOperations" }] : []));
-        this.operationsSignal = signal([], ...(ngDevMode ? [{ debugName: "operationsSignal" }] : []));
-        this.operationItems = computed(() => this.operationsSignal(), ...(ngDevMode ? [{ debugName: "operationItems" }] : []));
-        // Translate operators when raw operations change
-        effect(() => {
-            const ops = this.rawOperations(); // Track changes
-            this.translateOperators(ops);
-        });
-        // Re-translate when language changes
-        this.translationService.langChanges$.subscribe(() => {
-            this.translateOperators(this.rawOperations());
-        });
-    }
-    translateOperators(ops) {
-        Promise.all(ops.map(async (op) => ({
-            ...op,
-            title: op.title.startsWith('@')
-                ? await this.translationService.translateAsync(op.title)
-                : op.title,
-        }))).then((translatedOps) => {
-            this.operationsSignal.set(translatedOps);
-        });
-    }
-    getOperationsForType() {
-        switch (this.type()) {
-            case 'string':
-                return STRING_OPERATORS;
-            case 'number':
-                return NUMBER_OPERATORS;
-            case 'boolean':
-                return BOOLEAN_OPERATORS;
-            case 'datetime':
-                return DATE_OPERATORS;
-            default:
-                return ALL_DEFAULT_OPERATORS;
-        }
-    }
-    resolveOperations() {
-        const base = this.getOperationsForType();
-        const configured = this.operations();
-        if (!configured?.length) {
-            return base;
-        }
-        const byName = new Map(base.map((o) => [o.name, o]));
-        const resolved = [];
-        for (const op of configured) {
-            const canonical = byName.get(op.name);
-            if (canonical) {
-                resolved.push({
-                    ...canonical,
-                    ...op,
-                    hasValue: canonical.hasValue,
-                });
-            }
-        }
-        return resolved.length > 0 ? resolved : base;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operationItems()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-filter-operations', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXDecoratorModule, AXPopoverModule, AXButtonModule, AXSelectionListModule], template: "@if (operationItems().length > 1) {\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-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" }]
-        }], 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 }] }], operations: [{ type: i0.Input, args: [{ isSignal: true, alias: "operations", required: false }] }] } });
-
 class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -28044,7 +28270,6 @@ class AXPWidgetsModule {
                     AXPStringFilterWidget,
                     AXPBooleanFilterWidget,
                     AXPNumberFilterWidget,
-                    AXPDateTimeFilterWidget,
                     // AXPSelectFilterWidget,
                     AXPStatusFilterWidget,
                     AXPTimeDurationFilterWidget,
@@ -28085,6 +28310,20 @@ class AXPWidgetsModule {
                             icon: 'fa-light fa-square',
                         },
                     },
+                    {
+                        parentName: AXPDateTimeBoxWidget.name,
+                        widget: {
+                            name: 'datetime-filter',
+                            title: 'Date Time Filter',
+                            categories: AXP_WIDGETS_EDITOR_CATEGORY,
+                            type: 'filter',
+                            components: {},
+                            options: {
+                                filterMode: true,
+                            },
+                            icon: 'fa-light fa-square',
+                        },
+                    },
                 ],
             })] }); }
 }
@@ -28166,7 +28405,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                                 AXPStringFilterWidget,
                                 AXPBooleanFilterWidget,
                                 AXPNumberFilterWidget,
-                                AXPDateTimeFilterWidget,
                                 // AXPSelectFilterWidget,
                                 AXPStatusFilterWidget,
                                 AXPTimeDurationFilterWidget,
@@ -28207,6 +28445,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                                         icon: 'fa-light fa-square',
                                     },
                                 },
+                                {
+                                    parentName: AXPDateTimeBoxWidget.name,
+                                    widget: {
+                                        name: 'datetime-filter',
+                                        title: 'Date Time Filter',
+                                        categories: AXP_WIDGETS_EDITOR_CATEGORY,
+                                        type: 'filter',
+                                        components: {},
+                                        options: {
+                                            filterMode: true,
+                                        },
+                                        icon: 'fa-light fa-square',
+                                    },
+                                },
                             ],
                         }),
                     ],
@@ -28227,5 +28479,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditFileUploaderCommand, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileListComponent, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetService, AXPFileUploaderWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_ROW_EXPR_PREFIX, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPACING_UNITS, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES, AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRIGGERS_PROPERTY, AXP_TRIGGERS_PROPERTY_GROUP, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAddressWidget, AXPAddressWidgetColumnComponent, AXPAddressWidgetEditComponent, AXPAddressWidgetService, AXPAddressWidgetViewComponent, AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPCodeEditorWidget, AXPCodeEditorWidgetColumnComponent, AXPCodeEditorWidgetEditComponent, AXPCodeEditorWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDataSourceOptionsWidget, AXPDataSourceOptionsWidgetEditComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPEditFileUploaderCommand, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileListComponent, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetService, AXPFileUploaderWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPJsonViewerWidget, AXPJsonViewerWidgetEditComponent, AXPJsonViewerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPProgressBarWidget, AXPProgressBarWidgetColumnComponent, AXPProgressBarWidgetEditComponent, AXPProgressBarWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetColumnComponent, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRatePickerWidget, AXPRatePickerWidgetColumnComponent, AXPRatePickerWidgetEditComponent, AXPRatePickerWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectLanguagePopup, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusChipComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPStopwatchWidget, AXPStopwatchWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetColumnComponent, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_ROW_EXPR_PREFIX, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPACING_UNITS, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES, AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRIGGERS_PROPERTY, AXP_TRIGGERS_PROPERTY_GROUP, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-layout-widgets.mjs.map