@acorex/platform 19.1.8 → 19.1.9

package/fesm2022/acorex-platform-widgets.mjs

@@ -6,12 +6,12 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i1$5 from '@acorex/platform/layout/builder';
+import * as i1$6 from '@acorex/platform/layout/builder';
 import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGETS_FILTER_GROUP } from '@acorex/platform/layout/builder';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, untracked, ChangeDetectorRef, ElementRef, viewChild, afterNextRender, NgZone, model, input, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, untracked, ChangeDetectorRef, ElementRef, viewChild, afterRender, afterNextRender, NgZone, model, input, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
@@ -37,7 +37,7 @@ import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i4$1 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
-import { isNumber, sum, get } from 'lodash-es';
+import { isNumber, cloneDeep, sum, get } from 'lodash-es';
 import * as i1$3 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
 import * as i3$4 from '@acorex/components/password-box';
@@ -63,20 +63,22 @@ import * as i2$5 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$4 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
-import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
-import * as i4$3 from '@acorex/components/button-group';
+import * as i1$5 from '@acorex/components/grid-layout-builder';
+import { AXGridLayoutContainerComponent, AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';
+import { AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerGridDrawerComponent, AXPDesignerAddWidgetMiniButtonComponent } from '@acorex/platform/layout/designer';
+import * as i4$2 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i2$6 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
-import * as i4$2 from '@acorex/components/range-slider';
+import * as i3$6 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$6 from '@acorex/components/popover';
+import * as i1$7 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import * as i1$7 from '@acorex/components/cron-job';
+import * as i1$8 from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
-import * as i1$8 from '@acorex/components/qrcode';
+import * as i1$9 from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -7473,409 +7475,901 @@ const AXPSignatureWidget = {
     },
 };
 
-class AXPBlockWidgetDesignerComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.backgroundColor = computed(() => this.options()['backgroundColor']);
-        this.cssClass = computed(() => this.options()['cssClass']);
-        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
-        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
-        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
-        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
-        this.gap = computed(() => this.options()['gap'] ?? 0);
+/**
+ * Utility class for parsing and handling property editor values like borders, spacing, and units.
+ */
+class AXPPropertyEditorHelper {
+    /**
+     * Expands shorthand input values into full sets for sides or corners.
+     * @param values - Array of input values.
+     * @returns Expanded array of values.
+     */
+    static expandShorthand(values) {
+        switch (values.length) {
+            case 1:
+                return [values[0], values[0], values[0], values[0]];
+            case 2:
+                return [values[0], values[1], values[0], values[1]];
+            case 3:
+                return [values[0], values[1], values[2], values[1]];
+            case 4:
+                return values;
+            default:
+                throw new Error(`Invalid shorthand value count. Input: ${values}`);
+        }
     }
-    get __class() {
-        const cls = {};
-        //
-        cls[`ax-w-full`] = true;
-        cls[`ax-widget-outline`] = true;
-        //
-        cls[`ax-flex`] = true;
-        cls[`ax-gap-${this.gap()}`] = true;
-        //
-        if (this.flexAlignItems()) {
-            cls[this.flexAlignItems()] = true;
+    /**
+     * @param values An array of four values to condense.
+     * @returns A condensed string representation of the values.
+     */
+    static condenseShorthand(values) {
+        if (values.length !== 4) {
+            throw new Error('Expected 4 values for condensation.');
         }
-        if (this.flexJustifyContent()) {
-            cls[this.flexJustifyContent()] = true;
+        if (values[0] === values[1] && values[1] === values[2] && values[2] === values[3]) {
+            return `${values[0]}`;
         }
-        if (this.flexWrap()) {
-            cls[this.flexWrap()] = true;
+        else if (values[0] === values[2] && values[1] === values[3]) {
+            return `${values[0]} ${values[1]}`;
         }
-        if (this.flexDirection()) {
-            cls[this.flexDirection()] = true;
+        else if (values[1] === values[3]) {
+            return `${values[0]} ${values[1]} ${values[2]}`;
+        }
+        else {
+            return `${values[0]} ${values[1]} ${values[2]} ${values[3]}`;
         }
-        return cls;
     }
-    // TEST PURPOSE ONLY
-    // eff = effect(() => console.log(this.options()['flexOptions']));
-    get __style() {
-        const spacing = this.options()?.['spacing'];
-        const border = this.options()?.['border'];
-        const flex = this.options()?.['flexOptions'];
+    /**
+     * Parses sides (top, left, bottom, right) from a string.
+     * @param input - Input string.
+     * @returns Parsed sides object.
+     */
+    static parseSides(input) {
+        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
+        return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
+    }
+    static parseSidesWithUnits(input) {
+        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
         return {
-            // Background
-            'background-color': this.backgroundColor(),
-            // Spacing
-            padding: spacing?.padding ?? 0,
-            margin: spacing?.margin ?? 0,
-            // Border
-            'border-radius': border?.radius ?? 0,
-            'border-width': border?.width ?? 0,
-            'border-color': border?.color ?? '#000000',
-            'border-style': border?.style ?? 'none',
-            // Flexbox
-            'flex-direction': flex?.flexDirection ?? 'row',
-            'flex-wrap': flex?.flexWrap ?? 'nowrap',
-            'justify-content': flex?.justifyContent ?? 'flex-start',
-            'align-items': flex?.alignItems ?? 'flex-start',
-            gap: flex?.gap ?? '0px',
+            top: AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
+            right: AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
+            bottom: AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
+            left: AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
-            {
-                provide: AXPWidgetComponent,
-                useExisting: AXPBlockWidgetDesignerComponent,
-            },
-        ], usesInheritance: true, ngImport: i0, template: `
-    @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-designer-renderer
-      [node]="node"
-      [parentNode]="this"
-      [mode]="this.mode"
-      [locked]="this.locked"
-    ></ng-container>
-    } @empty {
-    <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
-    ></axp-designer-add-widget-mini-button>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-block-widget',
-                    template: `
-    @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-designer-renderer
-      [node]="node"
-      [parentNode]="this"
-      [mode]="this.mode"
-      [locked]="this.locked"
-    ></ng-container>
-    } @empty {
-    <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
-    ></axp-designer-add-widget-mini-button>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        AXPLayoutBuilderModule,
-                        AXPWidgetDesignerRendererDirective,
-                        AXPDesignerAddWidgetMiniButtonComponent,
-                    ],
-                    providers: [
-                        {
-                            provide: AXPWidgetComponent,
-                            useExisting: AXPBlockWidgetDesignerComponent,
-                        },
-                    ],
-                }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }], __style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-var blockWidgetDesigner_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPBlockWidgetDesignerComponent: AXPBlockWidgetDesignerComponent
-});
-
-class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.backgroundColor = computed(() => this.options()['backgroundColor']);
-        this.cssClass = computed(() => this.options()['cssClass']);
-        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
-        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
-        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
-        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
-        this.gap = computed(() => this.options()['gap'] ?? 0);
+    /**
+     * Parses corners (top-left, top-right, bottom-left, bottom-right) from a string.
+     * @param input - Input string.
+     * @returns Parsed corners object.
+     */
+    static parseCorners(input) {
+        const values = this.expandShorthand(input.split(' ').map((value) => value.trim()));
+        return {
+            'top-left': AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
+            'top-right': AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
+            'bottom-left': AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
+            'bottom-right': AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
+        };
     }
-    get __class() {
-        const cls = {};
-        //
-        cls[`ax-w-full`] = true;
-        //
-        cls[`ax-flex`] = true;
-        cls[`ax-gap-${this.gap()}`] = true;
-        //
-        if (this.flexAlignItems()) {
-            cls[this.flexAlignItems()] = true;
-        }
-        if (this.flexJustifyContent()) {
-            cls[this.flexJustifyContent()] = true;
-        }
-        if (this.flexWrap()) {
-            cls[this.flexWrap()] = true;
-        }
-        if (this.flexDirection()) {
-            cls[this.flexDirection()] = true;
-        }
-        return cls;
+    /**
+     * Parses a spacing box from strings for margin and padding.
+     * @param input - Spacing box string input.
+     * @returns Parsed spacing box.
+     */
+    static parseSpacingBox(input) {
+        return {
+            margin: this.parseSidesWithUnits(input.margin),
+            padding: this.parseSidesWithUnits(input.padding),
+        };
     }
-    get __style() {
-        const spacing = this.options()['spacing'];
-        const border = this.options()['border'];
+    /**
+     * Parses a border box from strings for width, radius, color, and style.
+     * @param input - Border box string input.
+     * @returns Parsed border box.
+     */
+    static parseBorderBox(input) {
         return {
-            // Background
-            'background-color': this.backgroundColor(),
-            padding: spacing.padding,
-            margin: spacing.margin,
-            'border-radius': border.radius,
-            'border-width': border.width,
-            'border-color': border.color,
-            'border-style': border.style,
+            width: this.parseSidesWithUnits(input.width),
+            radius: this.parseCorners(input.radius),
+            color: this.parseSides(input.color),
+            style: this.parseSides(input.style),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
-    @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-renderer
-      [node]="node"
-      [index]="index"
-      [parentNode]="this"
-      [mode]="this.mode"
-    ></ng-container>
+    /**
+     * Reverses a spacing box object into a string representation.
+     * @param input - Spacing box object.
+     * @param units - Units for margin and padding.
+     * @returns String representation of the spacing box.
+     */
+    static parseSpacingBoxReverse(input, units) {
+        const format = (value, unit) => `${value}${unit}`;
+        return {
+            margin: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.margin.top, units.margin.top),
+                format(input.margin.right, units.margin.right),
+                format(input.margin.bottom, units.margin.bottom),
+                format(input.margin.left, units.margin.left),
+            ]),
+            padding: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.padding.top, units.padding.top),
+                format(input.padding.right, units.padding.right),
+                format(input.padding.bottom, units.padding.bottom),
+                format(input.padding.left, units.padding.left),
+            ]),
+        };
+    }
+    /**
+     * Reverses a border box object into a string representation.
+     * @param input - Border box object.
+     * @param units - Units for width, radius, color, and style.
+     * @returns String representation of the border box.
+     */
+    static parseBorderBoxReverse(input, units) {
+        const format = (value, unit) => `${value}${unit}`;
+        return {
+            width: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.width.top, units.width.top),
+                format(input.width.right, units.width.right),
+                format(input.width.bottom, units.width.bottom),
+                format(input.width.left, units.width.left),
+            ]),
+            radius: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.radius['top-left'], units.radius['top-left']),
+                format(input.radius['top-right'], units.radius['top-right']),
+                format(input.radius['bottom-right'], units.radius['bottom-right']),
+                format(input.radius['bottom-left'], units.radius['bottom-left']),
+            ]),
+            color: AXPPropertyEditorHelper.condenseShorthand([
+                `${input.color.top}${units.color.top}`,
+                `${input.color.right}${units.color.right}`,
+                `${input.color.bottom}${units.color.bottom}`,
+                `${input.color.left}${units.color.left}`,
+            ]),
+            style: AXPPropertyEditorHelper.condenseShorthand([
+                `${input.style.top}${units.style.top}`,
+                `${input.style.right}${units.style.right}`,
+                `${input.style.bottom}${units.style.bottom}`,
+                `${input.style.left}${units.style.left}`,
+            ]),
+        };
+    }
+    /**
+     * Parses a value with a unit (e.g., "20px") and returns its numeric value and unit.
+     * @param input - Input string or number.
+     * @returns Object with value and unit.
+     */
+    static getValueWithUnit(input) {
+        if (typeof input === 'number')
+            return { value: input, unit: 'px' };
+        if (input === 'auto')
+            return { value: 0, unit: 'px' };
+        const match = input.match(/^([0-9.]+)([a-z%]*)$/i);
+        if (!match)
+            throw new Error(`Invalid unit format: ${input}`);
+        return { value: parseFloat(match[1]), unit: match[2] || '' };
+    }
+    /**
+     * Reverses a numeric value and unit into a single string.
+     * @param value - Numeric value.
+     * @param unit - Unit string.
+     * @returns Combined string.
+     */
+    static getValueFromUnit(value, unit) {
+        return unit ? `${value}${unit}` : `${value}`;
+    }
+    /**
+     * Parses a gap string into x and y values and units.
+     *
+     * @param gapString The gap string to parse (e.g., "10px", "10px 20px").
+     * @returns An object containing the x and y values and units.
+     * @throws Error If the gap string is invalid.
+     */
+    static parseGap(gap) {
+        // Split the gap string into parts
+        const parts = gap.split(/\s+/);
+        // Extract the first value and unit using a regex
+        const match = parts[0].match(/^(\d+\.?\d*)([a-z%]+)$/);
+        if (!match) {
+            throw new Error('Invalid gap format');
+        }
+        const [, xValue, unit] = match;
+        // Determine the y value
+        let yValue = parseFloat(xValue); // Default to the same as x
+        if (parts.length === 2) {
+            const secondMatch = parts[1].match(/^(\d+\.?\d*)[a-z%]+$/);
+            if (!secondMatch) {
+                throw new Error('Invalid gap format');
+            }
+            yValue = parseFloat(secondMatch[1]);
+        }
+        return {
+            values: {
+                x: parseFloat(xValue),
+                y: yValue,
+            },
+            unit,
+        };
+    }
+    /**
+     * Extracts the repetition count from a CSS grid template string of the format "repeat(N, 1fr)".
+     *
+     * @param gridTemplate - The CSS grid template string, e.g., "repeat(5, 1fr)".
+     * @returns The number of repetitions as a number.
+     */
+    static parseGridTemplate(gridTemplate) {
+        const match = gridTemplate.match(/^repeat\((\d+),\s*1fr\)$/);
+        if (!match) {
+            throw new Error("Invalid grid template format. Expected 'repeat(N, 1fr)'.");
+        }
+        return parseInt(match[1], 10);
+    }
+    /**
+     * Creates a CSS grid template string of the format "repeat(N, 1fr)"
+     * based on the provided repetition count.
+     *
+     * @param repetitionCount - The number of repetitions.
+     * @returns The CSS grid template string, e.g., "repeat(5, 1fr)".
+     */
+    static createGridTemplate(repetitionCount) {
+        if (repetitionCount <= 0) {
+            throw new Error('Repetition count must be a positive integer.');
+        }
+        return `repeat(${repetitionCount}, 1fr)`;
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
+
+class AXPAdvancedGridWidgetDesignerComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.el = inject(ElementRef);
+        this.designerService = inject(AXPDesignerService);
+        this.container = viewChild(AXGridLayoutContainerComponent);
+        this.widgetOption = computed(() => ({
+            h: 1,
+            w: 1,
+            content: '',
+        }));
+        this.cols = computed(() => this.calcGridRowOrColumn(this.options()['gridOptions']?.default?.gridTemplateColumns ?? 'repeat(1, 1fr)'));
+        this.rows = computed(() => this.calcGridRowOrColumn(this.options()['gridOptions']?.default?.gridTemplateRows ?? 'repeat(1, 1fr)'));
+        this.align = computed(() => this.options()['gridOptions']?.default?.alignItems ?? 'stretch');
+        this.justify = computed(() => this.options()['gridOptions']?.default?.justifyItems ?? 'stretch');
+        this.gap = computed(() => this.options()['gridOptions']?.default?.gap ?? '1px');
+        this.cells = computed(() => this.calcTotalCells(this.options()['gridOptions']?.default?.gridTemplateRows ?? 'repeat(1, 1fr)', this.options()['gridOptions']?.default?.gridTemplateColumns ?? 'repeat(1, 1fr)'));
+        this.settled = computed(() => this.cols() * this.rows() > 1 && this.children().length);
+        // eff = effect(() => console.log(this.options()['gridOptions']));
+        this.#columnsChangeEffect = effect(() => this.container()?.setOption({ column: this.cols() }));
+        this.#rowOrColumnChangeEffect = effect(() => {
+            const deferent = this.cells() - this.children().length;
+            untracked(() => {
+                if (deferent > 0) {
+                    Array.from({ length: deferent })
+                        .map(() => ({
+                        type: AXPWidgetsCatalog.gridItem,
+                    }))
+                        .forEach((node) => {
+                        this.designerService.addWidget(this.node, node);
+                    });
+                }
+                else if (deferent < 0) {
+                    this.children()
+                        .slice(deferent)
+                        .forEach((node) => this.designerService.removeWidget(node));
+                }
+            });
+        });
+        this.#af = afterRender(() => {
+            const els = this.el.nativeElement.querySelectorAll('ax-grid-layout-widget > .grid-stack-item-content');
+            if (els.length) {
+                els.forEach((item) => {
+                    if (item instanceof HTMLElement) {
+                        item.style.removeProperty('justify-content');
+                        item.style.justifyContent = this.justify();
+                        item.style.removeProperty('align-items');
+                        item.style.alignItems = this.align();
+                    }
+                    else {
+                        console.warn('Found a non-HTMLElement within the selected elements:', item);
+                    }
+                });
+            }
+            else {
+                console.warn('No grid-stack-item-content elements found in the afterRender hook.');
+            }
+        });
+    }
+    handleDrawerSelect(e) {
+        this.designerService.update({
+            values: {
+                // options: e,
+                options: {
+                    gridOptions: {
+                        default: {
+                            gridTemplateColumns: `repeat(${e.cols}, 1fr)`,
+                            gridTemplateRows: `repeat(${e.rows}, 1fr)`,
+                            gap: '10px',
+                        },
+                    },
+                },
+            },
+            mode: 'update',
+            widget: this.node,
+        });
+        const list = Array.from({ length: this.cells() }).map(() => ({
+            type: AXPWidgetsCatalog.gridItem,
+        }));
+        list.forEach((node) => {
+            this.designerService.addWidget(this.node, node);
+        });
+    }
+    // eff = effect(() => console.log(this.options()['gridOptions']));
+    #columnsChangeEffect;
+    #rowOrColumnChangeEffect;
+    calcTotalCells(rows, cols) {
+        return AXPPropertyEditorHelper.parseGridTemplate(rows) * AXPPropertyEditorHelper.parseGridTemplate(cols);
+    }
+    calcGridRowOrColumn(value) {
+        return AXPPropertyEditorHelper.parseGridTemplate(value);
+    }
+    #af;
+    get __class() {
+        return {
+            'ax-widget-container': true,
+            'ax-block': true,
+            'ax-w-full': true,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPAdvancedGridWidgetDesignerComponent, isStandalone: true, selector: "axp-advanced-grid-layout-widget", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPWidgetComponent,
+                useExisting: AXPAdvancedGridWidgetDesignerComponent,
+            },
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: AXGridLayoutContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if(settled()) {
+    <ax-grid-layout-container>
+      @for (child of children(); track $index) {
+      <ax-grid-layout-widget [options]="widgetOption()">
+        <ng-container
+          axp-widget-designer-renderer
+          [node]="child"
+          [parentNode]="this"
+          [mode]="this.mode"
+          [locked]="this.locked"
+        >
+        </ng-container>
+      </ax-grid-layout-widget>
+      }
+    </ax-grid-layout-container>
+    } @else {
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    }
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if(false){
+    <div class="ax-hidden">
+      ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+      ax-justify-items-end ax-justify-items-stretch
+    </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i1$5.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onChange", "onDisable", "onDrag", "onDragStart", "onDragStop", "onDropped", "onEnable", "onRemoved", "onResize", "onResizeStart", "onResizeStop", "isRendered", "isEmptyChange"] }, { kind: "component", type: i1$5.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-block-widget',
+                    selector: 'axp-advanced-grid-layout-widget',
                     template: `
-    @for (node of children(); track $index) {
-    <ng-container
-      axp-widget-renderer
-      [node]="node"
-      [index]="index"
-      [parentNode]="this"
-      [mode]="this.mode"
-    ></ng-container>
+    @if(settled()) {
+    <ax-grid-layout-container>
+      @for (child of children(); track $index) {
+      <ax-grid-layout-widget [options]="widgetOption()">
+        <ng-container
+          axp-widget-designer-renderer
+          [node]="child"
+          [parentNode]="this"
+          [mode]="this.mode"
+          [locked]="this.locked"
+        >
+        </ng-container>
+      </ax-grid-layout-widget>
+      }
+    </ax-grid-layout-container>
+    } @else {
+    <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
+    }
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if(false){
+    <div class="ax-hidden">
+      ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+      ax-justify-items-end ax-justify-items-stretch
+    </div>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule],
+                    imports: [
+                        CommonModule,
+                        AXGridLayoutBuilderModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerGridDrawerComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: AXPWidgetComponent,
+                            useExisting: AXPAdvancedGridWidgetDesignerComponent,
+                        },
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
                 args: ['class']
-            }], __style: [{
-                type: HostBinding,
-                args: ['style']
             }] } });
 
-var blockWidgetView_component = /*#__PURE__*/Object.freeze({
+var advancedGridWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPBlockWidgetViewComponent: AXPBlockWidgetViewComponent
+  AXPAdvancedGridWidgetDesignerComponent: AXPAdvancedGridWidgetDesignerComponent
 });
 
-const AXPBlockWidget = {
-    name: 'block-layout',
-    type: 'container',
-    title: 'Block',
-    description: 'Organizes content in blocks',
-    icon: 'fa-solid fa-block',
-    group: AXP_WIDGETS_LAYOUT_GROUP,
-    options: {
-        canInsert: true,
-    },
-    properties: [
-        AXP_NAME_PROPERTY,
-        // AXP_FONT_SIZE_PROPERTY,
-        // cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
-        ...AXP_LAYOUT_FLEX_PROPERTIES,
-        AXP_LAYOUT_SPACING_PROPERTY,
-        AXP_LAYOUT_BORDER_PROPERTY,
-        AXP_LAYOUT_FLEX_PROPERTY,
-    ],
-    components: {
-        designer: {
-            component: () => Promise.resolve().then(function () { return blockWidgetDesigner_component; }).then((c) => c.AXPBlockWidgetDesignerComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
-        },
-        view: {
-            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
-        },
-    },
-};
-
-class AXPPageWidgetViewComponent extends AXPWidgetComponent {
+class AXPAdvancedGridWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.backgroundColor = computed(() => this.options()["backgroundColor"]);
-    }
-    get __style() {
-        return {
-            'background-color': this.backgroundColor(),
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPPageWidgetViewComponent, isStandalone: true, selector: "axp-page-widget", host: { properties: { "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
-    @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
+        this.cols = computed(() => this.options()['cols'] ?? 1);
+        this.rows = computed(() => this.options()['rows'] ?? 1);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPAdvancedGridWidgetViewComponent, isStandalone: true, selector: "axp-advanced-grid-layout-widget", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+      </ng-container>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPageWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-page-widget',
+                    selector: 'axp-advanced-grid-layout-widget',
                     template: `
-    @for (node of children(); track $index) {
-    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
-    }
+    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-gap-{{ gap() }}">
+      @for (child of children(); track $index) {
+      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+      </ng-container>
+      }
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [CommonModule, AXPLayoutBuilderModule]
+                    imports: [CommonModule, AXPLayoutBuilderModule],
                 }]
-        }], propDecorators: { __style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+        }] });
 
-var pageWidgetView_component = /*#__PURE__*/Object.freeze({
+var advancedGridWidgetView_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPPageWidgetViewComponent: AXPPageWidgetViewComponent
+  AXPAdvancedGridWidgetViewComponent: AXPAdvancedGridWidgetViewComponent
 });
 
-const AXPPageWidget = {
-    name: 'page-layout',
-    title: 'Page',
-    description: 'Structures the entire page',
-    icon: 'fa-solid fa-page',
-    group: AXP_WIDGETS_LAYOUT_GROUP,
+const AXPAdvancedGridWidget = {
+    name: 'advanced-grid-layout',
+    title: 'Advanced Grid Layout',
     type: 'container',
-    visible: false,
-    properties: [
-        AXP_THEME_PROPERTY,
-        cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: '#ffffff' } }),
-        AXP_FONT_SIZE_PROPERTY,
-        createBooleanProperty({
-            name: 'hasHeader',
-            path: 'options.hasHeader',
-            title: 'Header',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-        }),
-        createBooleanProperty({
-            name: 'hasFooter',
-            path: 'options.hasFooter',
-            title: 'Footer',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-        }),
-    ],
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    icon: 'fa-solid fa-grid-2',
+    properties: [AXP_NAME_PROPERTY, AXP_LAYOUT_GRID_PROPERTY],
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return advancedGridWidgetView_component; }).then((c) => c.AXPAdvancedGridWidgetViewComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return advancedGridWidgetView_component; }).then((c) => c.AXPAdvancedGridWidgetViewComponent),
         },
         designer: {
-            component: () => import('./acorex-platform-widgets-page-widget-designer.component-CITselce.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+            component: () => Promise.resolve().then(function () { return advancedGridWidgetDesigner_component; }).then((c) => c.AXPAdvancedGridWidgetDesignerComponent),
         },
     },
 };
 
-class AXPRepeaterWidgetViewComponent extends AXPWidgetComponent {
+class AXPBlockWidgetDesignerComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.rows = signal([]);
+        this.backgroundColor = computed(() => this.options()['backgroundColor']);
+        this.cssClass = computed(() => this.options()['cssClass']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
-    ngAfterViewInit() {
-        this.rows.set(this.getValue() ?? []);
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        cls[`ax-widget-outline`] = true;
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-gap-${this.gap()}`] = true;
+        //
+        if (this.flexAlignItems()) {
+            cls[this.flexAlignItems()] = true;
+        }
+        if (this.flexJustifyContent()) {
+            cls[this.flexJustifyContent()] = true;
+        }
+        if (this.flexWrap()) {
+            cls[this.flexWrap()] = true;
+        }
+        if (this.flexDirection()) {
+            cls[this.flexDirection()] = true;
+        }
+        return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPRepeaterWidgetViewComponent, isStandalone: true, selector: "axp-repeater-widget", usesInheritance: true, ngImport: i0, template: `
-    @for(row of rows();let i=$index; track i)
-    {
-      @for (node of children();track $index) 
-      {
-      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
-      }
+    // TEST PURPOSE ONLY
+    // eff = effect(() => console.log(this.options()['flexOptions']));
+    get __style() {
+        const spacing = this.options()?.['spacing'];
+        const border = this.options()?.['border'];
+        const flex = this.options()?.['flexOptions'];
+        return {
+            // Background
+            'background-color': this.backgroundColor(),
+            // Spacing
+            padding: spacing?.padding ?? 0,
+            margin: spacing?.margin ?? 0,
+            // Border
+            'border-radius': border?.radius ?? 0,
+            'border-width': border?.width ?? 0,
+            'border-color': border?.color ?? '#000000',
+            'border-style': border?.style ?? 'none',
+            // Flexbox
+            'flex-direction': flex?.flexDirection ?? 'row',
+            'flex-wrap': flex?.flexWrap ?? 'nowrap',
+            'justify-content': flex?.justifyContent ?? 'flex-start',
+            'align-items': flex?.alignItems ?? 'flex-start',
+            gap: flex?.gap ?? '0px',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBlockWidgetDesignerComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, providers: [
+            {
+                provide: AXPWidgetComponent,
+                useExisting: AXPBlockWidgetDesignerComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @for (node of children(); track $index) {
+    <ng-container
+      axp-widget-designer-renderer
+      [node]="node"
+      [parentNode]="this"
+      [mode]="this.mode"
+      [locked]="this.locked"
+    ></ng-container>
+    } @empty {
+    <axp-designer-add-widget-mini-button
+      class="ax-flex-1 ax-self-center ax-place-self-end"
+    ></axp-designer-add-widget-mini-button>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'axp-repeater-widget',
+                    selector: 'axp-block-widget',
                     template: `
-    @for(row of rows();let i=$index; track i)
-    {
-      @for (node of children();track $index) 
-      {
-      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
-      }
+    @for (node of children(); track $index) {
+    <ng-container
+      axp-widget-designer-renderer
+      [node]="node"
+      [parentNode]="this"
+      [mode]="this.mode"
+      [locked]="this.locked"
+    ></ng-container>
+    } @empty {
+    <axp-designer-add-widget-mini-button
+      class="ax-flex-1 ax-self-center ax-place-self-end"
+    ></axp-designer-add-widget-mini-button>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXPLayoutBuilderModule]
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetMiniButtonComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: AXPWidgetComponent,
+                            useExisting: AXPBlockWidgetDesignerComponent,
+                        },
+                    ],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
 
-var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
+var blockWidgetDesigner_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  AXPRepeaterWidgetViewComponent: AXPRepeaterWidgetViewComponent
+  AXPBlockWidgetDesignerComponent: AXPBlockWidgetDesignerComponent
 });
 
-class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
+class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.hasControls = computed(() => this.options()["hasControls"]);
-        this.rows = computed(() => {
-            return this.convertValueToArray() ?? [];
-        });
-    }
-    handleAddItemClick() {
-        this.addNew();
-    }
-    handleRemoveItemClick(i) {
-        this.removeItem(i);
-    }
-    addNew() {
-        const newValue = [...(this.convertValueToArray() ?? []), {}];
-        this.setValue(newValue);
+        this.backgroundColor = computed(() => this.options()['backgroundColor']);
+        this.cssClass = computed(() => this.options()['cssClass']);
+        this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id);
+        this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id);
+        this.flexWrap = computed(() => this.options()['flexWrap']?.id);
+        this.flexDirection = computed(() => this.options()['flexDirection']?.id);
+        this.gap = computed(() => this.options()['gap'] ?? 0);
     }
-    removeItem(index) {
-        const currentArray = [...this.convertValueToArray()];
-        currentArray.splice(index, 1);
-        this.setValue(currentArray);
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        //
+        cls[`ax-flex`] = true;
+        cls[`ax-gap-${this.gap()}`] = true;
+        //
+        if (this.flexAlignItems()) {
+            cls[this.flexAlignItems()] = true;
+        }
+        if (this.flexJustifyContent()) {
+            cls[this.flexJustifyContent()] = true;
+        }
+        if (this.flexWrap()) {
+            cls[this.flexWrap()] = true;
+        }
+        if (this.flexDirection()) {
+            cls[this.flexDirection()] = true;
+        }
+        return cls;
     }
-    convertValueToArray() {
+    get __style() {
+        const spacing = this.options()['spacing'];
+        const border = this.options()['border'];
+        return {
+            // Background
+            'background-color': this.backgroundColor(),
+            padding: spacing.padding,
+            margin: spacing.margin,
+            'border-radius': border.radius,
+            'border-width': border.width,
+            'border-color': border.color,
+            'border-style': border.style,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBlockWidgetViewComponent, isStandalone: true, selector: "axp-block-widget", host: { properties: { "class": "this.__class", "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
+    @for (node of children(); track $index) {
+    <ng-container
+      axp-widget-renderer
+      [node]="node"
+      [index]="index"
+      [parentNode]="this"
+      [mode]="this.mode"
+    ></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-block-widget',
+                    template: `
+    @for (node of children(); track $index) {
+    <ng-container
+      axp-widget-renderer
+      [node]="node"
+      [index]="index"
+      [parentNode]="this"
+      [mode]="this.mode"
+    ></ng-container>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule],
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }], __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+var blockWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPBlockWidgetViewComponent: AXPBlockWidgetViewComponent
+});
+
+const AXPBlockWidget = {
+    name: 'block-layout',
+    type: 'container',
+    title: 'Block',
+    description: 'Organizes content in blocks',
+    icon: 'fa-solid fa-block',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    options: {
+        canInsert: true,
+    },
+    properties: [
+        AXP_NAME_PROPERTY,
+        // AXP_FONT_SIZE_PROPERTY,
+        // cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
+        ...AXP_LAYOUT_FLEX_PROPERTIES,
+        AXP_LAYOUT_SPACING_PROPERTY,
+        AXP_LAYOUT_BORDER_PROPERTY,
+        AXP_LAYOUT_FLEX_PROPERTY,
+    ],
+    components: {
+        designer: {
+            component: () => Promise.resolve().then(function () { return blockWidgetDesigner_component; }).then((c) => c.AXPBlockWidgetDesignerComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+        },
+        view: {
+            component: () => Promise.resolve().then(function () { return blockWidgetView_component; }).then((c) => c.AXPBlockWidgetViewComponent),
+        },
+    },
+};
+
+class AXPPageWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.backgroundColor = computed(() => this.options()["backgroundColor"]);
+    }
+    get __style() {
+        return {
+            'background-color': this.backgroundColor(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPageWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPPageWidgetViewComponent, isStandalone: true, selector: "axp-page-widget", host: { properties: { "style": "this.__style" } }, usesInheritance: true, ngImport: i0, template: `
+    @for (node of children(); track $index) {
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPageWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-page-widget',
+                    template: `
+    @for (node of children(); track $index) {
+    <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [CommonModule, AXPLayoutBuilderModule]
+                }]
+        }], propDecorators: { __style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+var pageWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPPageWidgetViewComponent: AXPPageWidgetViewComponent
+});
+
+const AXPPageWidget = {
+    name: 'page-layout',
+    title: 'Page',
+    description: 'Structures the entire page',
+    icon: 'fa-solid fa-page',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    type: 'container',
+    visible: false,
+    properties: [
+        AXP_THEME_PROPERTY,
+        cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: '#ffffff' } }),
+        AXP_FONT_SIZE_PROPERTY,
+        createBooleanProperty({
+            name: 'hasHeader',
+            path: 'options.hasHeader',
+            title: 'Header',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        }),
+        createBooleanProperty({
+            name: 'hasFooter',
+            path: 'options.hasFooter',
+            title: 'Footer',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+        }),
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return pageWidgetView_component; }).then((c) => c.AXPPageWidgetViewComponent),
+        },
+        designer: {
+            component: () => import('./acorex-platform-widgets-page-widget-designer.component-CITselce.mjs').then((c) => c.AXPPageWidgetDesignerComponent),
+        },
+    },
+};
+
+class AXPRepeaterWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.rows = signal([]);
+    }
+    ngAfterViewInit() {
+        this.rows.set(this.getValue() ?? []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPRepeaterWidgetViewComponent, isStandalone: true, selector: "axp-repeater-widget", usesInheritance: true, ngImport: i0, template: `
+    @for(row of rows();let i=$index; track i)
+    {
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-repeater-widget',
+                    template: `
+    @for(row of rows();let i=$index; track i)
+    {
+      @for (node of children();track $index) 
+      {
+      <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
+      }
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule, AXPLayoutBuilderModule]
+                }]
+        }] });
+
+var repeaterWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPRepeaterWidgetViewComponent: AXPRepeaterWidgetViewComponent
+});
+
+class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.disabled = computed(() => this.options()["disabled"]);
+        this.hasControls = computed(() => this.options()["hasControls"]);
+        this.rows = computed(() => {
+            return this.convertValueToArray() ?? [];
+        });
+    }
+    handleAddItemClick() {
+        this.addNew();
+    }
+    handleRemoveItemClick(i) {
+        this.removeItem(i);
+    }
+    addNew() {
+        const newValue = [...(this.convertValueToArray() ?? []), {}];
+        this.setValue(newValue);
+    }
+    removeItem(index) {
+        const currentArray = [...this.convertValueToArray()];
+        currentArray.splice(index, 1);
+        this.setValue(currentArray);
+    }
+    convertValueToArray() {
         return this.getValue() ?
             Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()] :
             [];
@@ -7942,7 +8436,7 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
         You haven't added any items yet. Click “Start Adding Items” to get started!
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetEditComponent, decorators: [{
             type: Component,
@@ -8030,422 +8524,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-var repeaterWidgetPrint_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPRepeaterWidgetPrintComponent: AXPRepeaterWidgetPrintComponent
-});
-
-class AXPRepeaterWidgetDesignerComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.hasControls = computed(() => this.options()["hasControls"]);
-    }
-    get __class() {
-        const cls = {};
-        //
-        cls[`ax-block`] = true;
-        cls[`ax-w-full`] = true;
-        return cls;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPRepeaterWidgetDesignerComponent, isStandalone: true, selector: "axp-repeater-widget", host: { properties: { "class": "this.__class" } }, providers: [
-            {
-                provide: AXPWidgetComponent,
-                useExisting: AXPRepeaterWidgetDesignerComponent
-            }
-        ], usesInheritance: true, ngImport: i0, template: `
-    @if(hasControls())
-    {
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11">
-        <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
-      </div>
-      <ax-button
-        [disabled]="disabled()"
-        look="twotone"
-        color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
-      >
-        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-      </ax-button>
-      <ax-button
-          [text]="'Add New'"
-          look="twotone"
-          [disabled]="disabled()"
-          class="ax-col-start-10  ax-col-end-13"
-        >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
-    </div>
-    }
-    @else {
-      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-    }
-    <ng-template #tpl>
-      @for (node of children();track $index) {
-      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode" [locked]="this.locked"> </ng-container>
-      }
-      @empty {
-       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
-      }
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-repeater-widget',
-                    template: `
-    @if(hasControls())
-    {
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
-      <div class="ax-col-span-11">
-        <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
-      </div>
-      <ax-button
-        [disabled]="disabled()"
-        look="twotone"
-        color="danger"
-        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
-      >
-        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
-      </ax-button>
-      <ax-button
-          [text]="'Add New'"
-          look="twotone"
-          [disabled]="disabled()"
-          class="ax-col-start-10  ax-col-end-13"
-        >
-        <ax-prefix>
-          <ax-icon class="fa-solid fa-add"></ax-icon>
-        </ax-prefix>
-      </ax-button>
-    </div>
-    }
-    @else {
-      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
-    }
-    <ng-template #tpl>
-      @for (node of children();track $index) {
-      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode" [locked]="this.locked"> </ng-container>
-      }
-      @empty {
-       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
-      }
-    </ng-template>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
-                    providers: [
-                        {
-                            provide: AXPWidgetComponent,
-                            useExisting: AXPRepeaterWidgetDesignerComponent
-                        }
-                    ]
-                }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-var repeaterWidgetDesigner_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPRepeaterWidgetDesignerComponent: AXPRepeaterWidgetDesignerComponent
-});
-
-const AXPRepeaterWidget = {
-    name: 'repeater-layout',
-    title: 'Repeater',
-    description: 'Adds repeating form elements',
-    icon: 'fa-solid fa-table-list',
-    group: AXP_WIDGETS_LAYOUT_GROUP,
-    type: 'container',
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        AXP_DISABLED_PROPERTY,
-        createBooleanProperty({
-            name: "hasControls",
-            title: "Controls",
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            defaultValue: true,
-            path: "options.hasControls",
-        })
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return repeaterWidgetView_component; }).then((c) => c.AXPRepeaterWidgetViewComponent),
-        },
-        edit: {
-            component: () => Promise.resolve().then(function () { return repeaterWidgetEdit_component; }).then((c) => c.AXPRepeaterWidgetEditComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return repeaterWidgetPrint_component; }).then((c) => c.AXPRepeaterWidgetPrintComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
-        },
-    },
-};
-
-/**
- * Utility class for parsing and handling property editor values like borders, spacing, and units.
- */
-class AXPPropertyEditorHelper {
-    /**
-     * Expands shorthand input values into full sets for sides or corners.
-     * @param values - Array of input values.
-     * @returns Expanded array of values.
-     */
-    static expandShorthand(values) {
-        switch (values.length) {
-            case 1:
-                return [values[0], values[0], values[0], values[0]];
-            case 2:
-                return [values[0], values[1], values[0], values[1]];
-            case 3:
-                return [values[0], values[1], values[2], values[1]];
-            case 4:
-                return values;
-            default:
-                throw new Error(`Invalid shorthand value count. Input: ${values}`);
-        }
-    }
-    /**
-     * @param values An array of four values to condense.
-     * @returns A condensed string representation of the values.
-     */
-    static condenseShorthand(values) {
-        if (values.length !== 4) {
-            throw new Error('Expected 4 values for condensation.');
-        }
-        if (values[0] === values[1] && values[1] === values[2] && values[2] === values[3]) {
-            return `${values[0]}`;
-        }
-        else if (values[0] === values[2] && values[1] === values[3]) {
-            return `${values[0]} ${values[1]}`;
-        }
-        else if (values[1] === values[3]) {
-            return `${values[0]} ${values[1]} ${values[2]}`;
-        }
-        else {
-            return `${values[0]} ${values[1]} ${values[2]} ${values[3]}`;
-        }
-    }
-    /**
-     * Parses sides (top, left, bottom, right) from a string.
-     * @param input - Input string.
-     * @returns Parsed sides object.
-     */
-    static parseSides(input) {
-        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
-        return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
-    }
-    static parseSidesWithUnits(input) {
-        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
-        return {
-            top: AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
-            right: AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
-            bottom: AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
-            left: AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
-        };
-    }
-    /**
-     * Parses corners (top-left, top-right, bottom-left, bottom-right) from a string.
-     * @param input - Input string.
-     * @returns Parsed corners object.
-     */
-    static parseCorners(input) {
-        const values = this.expandShorthand(input.split(' ').map((value) => value.trim()));
-        return {
-            'top-left': AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
-            'top-right': AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
-            'bottom-left': AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
-            'bottom-right': AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
-        };
-    }
-    /**
-     * Parses a spacing box from strings for margin and padding.
-     * @param input - Spacing box string input.
-     * @returns Parsed spacing box.
-     */
-    static parseSpacingBox(input) {
-        return {
-            margin: this.parseSidesWithUnits(input.margin),
-            padding: this.parseSidesWithUnits(input.padding),
-        };
-    }
-    /**
-     * Parses a border box from strings for width, radius, color, and style.
-     * @param input - Border box string input.
-     * @returns Parsed border box.
-     */
-    static parseBorderBox(input) {
-        return {
-            width: this.parseSidesWithUnits(input.width),
-            radius: this.parseCorners(input.radius),
-            color: this.parseSides(input.color),
-            style: this.parseSides(input.style),
-        };
-    }
-    /**
-     * Reverses a spacing box object into a string representation.
-     * @param input - Spacing box object.
-     * @param units - Units for margin and padding.
-     * @returns String representation of the spacing box.
-     */
-    static parseSpacingBoxReverse(input, units) {
-        const format = (value, unit) => `${value}${unit}`;
-        return {
-            margin: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.margin.top, units.margin.top),
-                format(input.margin.right, units.margin.right),
-                format(input.margin.bottom, units.margin.bottom),
-                format(input.margin.left, units.margin.left),
-            ]),
-            padding: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.padding.top, units.padding.top),
-                format(input.padding.right, units.padding.right),
-                format(input.padding.bottom, units.padding.bottom),
-                format(input.padding.left, units.padding.left),
-            ]),
-        };
-    }
-    /**
-     * Reverses a border box object into a string representation.
-     * @param input - Border box object.
-     * @param units - Units for width, radius, color, and style.
-     * @returns String representation of the border box.
-     */
-    static parseBorderBoxReverse(input, units) {
-        const format = (value, unit) => `${value}${unit}`;
-        return {
-            width: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.width.top, units.width.top),
-                format(input.width.right, units.width.right),
-                format(input.width.bottom, units.width.bottom),
-                format(input.width.left, units.width.left),
-            ]),
-            radius: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.radius['top-left'], units.radius['top-left']),
-                format(input.radius['top-right'], units.radius['top-right']),
-                format(input.radius['bottom-right'], units.radius['bottom-right']),
-                format(input.radius['bottom-left'], units.radius['bottom-left']),
-            ]),
-            color: AXPPropertyEditorHelper.condenseShorthand([
-                `${input.color.top}${units.color.top}`,
-                `${input.color.right}${units.color.right}`,
-                `${input.color.bottom}${units.color.bottom}`,
-                `${input.color.left}${units.color.left}`,
-            ]),
-            style: AXPPropertyEditorHelper.condenseShorthand([
-                `${input.style.top}${units.style.top}`,
-                `${input.style.right}${units.style.right}`,
-                `${input.style.bottom}${units.style.bottom}`,
-                `${input.style.left}${units.style.left}`,
-            ]),
-        };
-    }
-    /**
-     * Parses a value with a unit (e.g., "20px") and returns its numeric value and unit.
-     * @param input - Input string or number.
-     * @returns Object with value and unit.
-     */
-    static getValueWithUnit(input) {
-        if (typeof input === 'number')
-            return { value: input, unit: 'px' };
-        if (input === 'auto')
-            return { value: 0, unit: 'px' };
-        const match = input.match(/^([0-9.]+)([a-z%]*)$/i);
-        if (!match)
-            throw new Error(`Invalid unit format: ${input}`);
-        return { value: parseFloat(match[1]), unit: match[2] || '' };
-    }
-    /**
-     * Reverses a numeric value and unit into a single string.
-     * @param value - Numeric value.
-     * @param unit - Unit string.
-     * @returns Combined string.
-     */
-    static getValueFromUnit(value, unit) {
-        return unit ? `${value}${unit}` : `${value}`;
-    }
-    /**
-     * Parses a gap string into x and y values and units.
-     *
-     * @param gapString The gap string to parse (e.g., "10px", "10px 20px").
-     * @returns An object containing the x and y values and units.
-     * @throws Error If the gap string is invalid.
-     */
-    static parseGap(gapString) {
-        const gapValues = gapString.trim().split(/\s+/);
-        const result = {
-            values: { x: 0, y: 0 },
-            units: { x: 'px', y: 'px' },
-        };
-        /**
-         * Extracts the numeric value and unit from a gap value string.
-         *
-         * @param value The gap value string to parse (e.g., "10px").
-         * @returns An object containing the numeric value and unit.
-         * @throws Error If the gap value is invalid.
-         */
-        function extractValueAndUnit(value) {
-            const match = value.match(/^([\d.]+)([a-z%]*)$/i);
-            if (!match)
-                throw new Error(`Invalid gap value: ${value}`);
-            return { value: parseFloat(match[1]), unit: match[2] || 'px' };
-        }
-        if (gapValues.length === 1) {
-            const { value, unit } = extractValueAndUnit(gapValues[0]);
-            result.values.x = value;
-            result.units.x = unit;
-            result.values.y = value;
-            result.units.y = unit;
-        }
-        else if (gapValues.length === 2) {
-            const { value: xValue, unit: xUnit } = extractValueAndUnit(gapValues[0]);
-            const { value: yValue, unit: yUnit } = extractValueAndUnit(gapValues[1]);
-            result.values.x = xValue;
-            result.units.x = xUnit;
-            result.values.y = yValue;
-            result.units.y = yUnit;
-        }
-        else {
-            throw new Error(`Invalid gap string: ${gapString}`);
-        }
-        return result;
+var repeaterWidgetPrint_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPRepeaterWidgetPrintComponent: AXPRepeaterWidgetPrintComponent
+});
+
+class AXPRepeaterWidgetDesignerComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.disabled = computed(() => this.options()["disabled"]);
+        this.hasControls = computed(() => this.options()["hasControls"]);
     }
-    /**
-     * Extracts the repetition count from a CSS grid template string of the format "repeat(N, 1fr)".
-     *
-     * @param gridTemplate - The CSS grid template string, e.g., "repeat(5, 1fr)".
-     * @returns The number of repetitions as a number.
-     */
-    static parseGridTemplate(gridTemplate) {
-        const match = gridTemplate.match(/^repeat\((\d+),\s*1fr\)$/);
-        if (!match) {
-            throw new Error("Invalid grid template format. Expected 'repeat(N, 1fr)'.");
-        }
-        return parseInt(match[1], 10);
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-block`] = true;
+        cls[`ax-w-full`] = true;
+        return cls;
     }
-    /**
-     * Creates a CSS grid template string of the format "repeat(N, 1fr)"
-     * based on the provided repetition count.
-     *
-     * @param repetitionCount - The number of repetitions.
-     * @returns The CSS grid template string, e.g., "repeat(5, 1fr)".
-     */
-    static createGridTemplate(repetitionCount) {
-        if (repetitionCount <= 0) {
-            throw new Error('Repetition count must be a positive integer.');
-        }
-        return `repeat(${repetitionCount}, 1fr)`;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPRepeaterWidgetDesignerComponent, isStandalone: true, selector: "axp-repeater-widget", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPWidgetComponent,
+                useExisting: AXPRepeaterWidgetDesignerComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <div class="ax-col-span-11">
+        <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
+      </div>
+      <ax-button
+        [disabled]="disabled()"
+        look="twotone"
+        color="danger"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
     }
+    @else {
+      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+    }
+    <ng-template #tpl>
+      @for (node of children();track $index) {
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode" [locked]="this.locked"> </ng-container>
+      }
+      @empty {
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-repeater-widget',
+                    template: `
+    @if(hasControls())
+    {
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <div class="ax-col-span-11">
+        <ng-container [ngTemplateOutlet]="tpl" ></ng-container>
+      </div>
+      <ax-button
+        [disabled]="disabled()"
+        look="twotone"
+        color="danger"
+        class="ax-col-start-12 ax-col-end-13 ax-justify-self-end ax-self-end"
+      >
+        <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+      </ax-button>
+      <ax-button
+          [text]="'Add New'"
+          look="twotone"
+          [disabled]="disabled()"
+          class="ax-col-start-10  ax-col-end-13"
+        >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+    }
+    @else {
+      <ng-container [ngTemplateOutlet]="tpl"></ng-container>
+    }
+    <ng-template #tpl>
+      @for (node of children();track $index) {
+      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this"  [mode]="this.mode" [locked]="this.locked"> </ng-container>
+      }
+      @empty {
+       <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
+      }
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent],
+                    providers: [
+                        {
+                            provide: AXPWidgetComponent,
+                            useExisting: AXPRepeaterWidgetDesignerComponent
+                        }
+                    ]
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var repeaterWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPRepeaterWidgetDesignerComponent: AXPRepeaterWidgetDesignerComponent
+});
+
+const AXPRepeaterWidget = {
+    name: 'repeater-layout',
+    title: 'Repeater',
+    description: 'Adds repeating form elements',
+    icon: 'fa-solid fa-table-list',
+    group: AXP_WIDGETS_LAYOUT_GROUP,
+    type: 'container',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+        createBooleanProperty({
+            name: "hasControls",
+            title: "Controls",
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            defaultValue: true,
+            path: "options.hasControls",
+        })
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return repeaterWidgetView_component; }).then((c) => c.AXPRepeaterWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return repeaterWidgetEdit_component; }).then((c) => c.AXPRepeaterWidgetEditComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return repeaterWidgetPrint_component; }).then((c) => c.AXPRepeaterWidgetPrintComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return repeaterWidgetDesigner_component; }).then((c) => c.AXPRepeaterWidgetDesignerComponent),
+        },
+    },
+};
 
 const AXP_default_Border_Box_Value = {
     width: { top: 0, left: 0, bottom: 0, right: 0 },
@@ -8467,6 +8705,16 @@ const AXP_default_Spacing_Box_Units = {
     padding: { top: 'px', left: 'px', bottom: 'px', right: 'px' },
     margin: { top: 'px', left: 'px', bottom: 'px', right: 'px' },
 };
+function findNonEmptyBreakpoints(values) {
+    const breakpoints = ['default', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+    const nonEmptyBreakpoints = [];
+    for (const breakpoint of breakpoints) {
+        if (values[breakpoint] !== undefined) {
+            nonEmptyBreakpoints.push(breakpoint);
+        }
+    }
+    return nonEmptyBreakpoints;
+}
 
 class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
@@ -8673,7 +8921,7 @@ class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", 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-2 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-28\"\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-8\"\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      }@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-[56px]'\"\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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\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      </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-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [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            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\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            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i4$2.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: i4$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$3.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$6.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", 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-2 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-28\"\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-8\"\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      }@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-[56px]'\"\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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\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      </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-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\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      </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-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [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            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\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            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, 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: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$2.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$6.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -8747,7 +8995,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
         this.flexDirectionIsReverse = computed(() => this.flexDirection().endsWith('reverse'));
         this.flexDirectionWithoutReverse = computed(() => this.flexDirection().replace('-reverse', ''));
         this.gapMode = signal('both');
-        this.gapUnit = signal({ both: 'px', x: 'px', y: 'px' });
+        this.gapUnit = signal('px');
         this.gap = signal({ both: 0, x: 0, y: 0 });
         this.lastGap = signal(0);
         this.selectedJustify = signal({ value: 'flex-start', label: 'Start' });
@@ -8790,8 +9038,8 @@ class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
             this.setWrapMode(value?.flexWrap ?? 'nowrap');
             this.clickedJustify.set(value?.justifyContent ?? 'flex-start');
             this.clickedAlign.set(value?.alignItems ?? 'flex-start');
-            const { values, units } = AXPPropertyEditorHelper.parseGap(value?.gap ?? '0px');
-            this.gapUnit.set({ ...units, both: units.x });
+            const { values, unit } = AXPPropertyEditorHelper.parseGap(value?.gap ?? '0px');
+            this.gapUnit.set(unit);
             if (values.x === values.y) {
                 this.gapMode.set('both');
                 this.setGap(values.x, 'both');
@@ -8828,11 +9076,11 @@ class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
     setGap(size, side) {
         this.gap.set({ ...this.gap(), [side]: size });
         if (this.gapMode() === 'both') {
-            const gap = this.gap().both + this.gapUnit().both;
+            const gap = this.gap().both + this.gapUnit();
             this.saveValue({ gap });
         }
         else {
-            const gap = this.gap().x + this.gapUnit().x + ' ' + this.gap().y + this.gapUnit().y;
+            const gap = this.gap().x + this.gapUnit() + ' ' + this.gap().y + this.gapUnit();
             this.saveValue({ gap });
         }
         this.lastGap.set(size);
@@ -8965,7 +9213,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", 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 [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-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\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 class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @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      >\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          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @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            } } @else if(clickedJustify()==='space-around'){ @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            } } @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-w-32\"\n      [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          [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-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"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\">Column</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-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</div>", styles: [".axp-flex-option ax-range-slider{--ax-range-slider-base-thickness: .1rem;padding:.25rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$3.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: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i4$2.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$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "17.0.0", version: "19.0.3", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", 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 [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-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\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 class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @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      >\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          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @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            } } @else if(clickedJustify()==='space-around'){ @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            } } @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-w-32\"\n      [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          [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-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"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\">Column</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-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</div>", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$2.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: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "19.0.3", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -8978,7 +9226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXDropdownModule,
                         AXButtonModule,
                         FormsModule,
-                    ], 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 [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-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\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 class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @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      >\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          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @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            } } @else if(clickedJustify()==='space-around'){ @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            } } @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-w-32\"\n      [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          [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-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"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\">Column</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-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</div>", styles: [".axp-flex-option ax-range-slider{--ax-range-slider-base-thickness: .1rem;padding:.25rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"] }]
+                    ], 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 [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-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\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 class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @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            } } @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      >\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          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @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            } } @else if(clickedJustify()==='space-around'){ @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            } } @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-w-32\"\n      [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          [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-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"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\">Column</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-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</div>", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"] }]
         }] });
 
 var flexOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -9031,19 +9279,39 @@ class AXPGridOptionsWidgetEditComponent extends AXPWidgetComponent {
         super(...arguments);
         this.rendered = signal(false);
         this.gridSides = AXP_Grid_Box_Alignments;
+        this.currentBreakpoint = signal('default');
+        this.lastBreakpoint = signal('default');
+        this.isBreakpointConfigured = signal({
+            default: true,
+            sm: false,
+            md: false,
+            lg: false,
+            xl: false,
+            '2xl': false,
+            '3xl': false,
+        });
+        this.selectionItems = [
+            { id: 'default', text: 'Default' },
+            { id: 'sm', text: 'Sm' },
+            { id: 'md', text: 'Md' },
+            { id: 'lg', text: 'Lg' },
+            { id: 'xl', text: 'Xl' },
+            { id: '2xl', text: '2Xl' },
+            { id: '3xl', text: '3Xl' },
+        ];
         this.gridTemplateColumns = signal(1);
         this.gridTemplateRows = signal(1);
         this.gridDirection = signal('row');
-        this.gapMode = signal('both');
-        this.gapUnit = signal({ both: 'px', x: 'px', y: 'px' });
-        this.gap = signal({ both: 0, x: 0, y: 0 });
+        this.gapUnit = signal('px');
+        this.gap = signal({ x: 0, y: 0 });
+        this.gapMode = signal('single');
         this.lastGap = signal(0);
-        this.selectedJustify = signal({ value: 'start', label: 'Start' });
-        this.selectedAlign = signal({ value: 'start', label: 'Start' });
+        this.selectedJustify = signal({ value: 'stretch', label: 'Stretch' });
+        this.selectedAlign = signal({ value: 'stretch', label: 'Stretch' });
         this.hoveredAlign = signal(null);
         this.hoveredJustify = signal(null);
-        this.clickedAlign = signal('start');
-        this.clickedJustify = signal('start');
+        this.clickedAlign = signal('stretch');
+        this.clickedJustify = signal('stretch');
         this.justifyDataSource = new AXDataSource({
             pageSize: 99,
             load: async (e) => {
@@ -9064,20 +9332,19 @@ class AXPGridOptionsWidgetEditComponent extends AXPWidgetComponent {
         });
         this.findAlignNameById = (value) => {
             const side = AXP_Grid_Box_Align_Items_Options.find((side) => side.value === value);
-            return side?.label;
+            return side.label;
         };
         this.findJustifyNameById = (value) => {
             const side = AXP_Grid_Box_Justify_Items_Options.find((side) => side.value === value);
-            return side?.label;
+            return side.label;
         };
-        this.#af = afterNextRender(() => {
-            this.initialValues(this.getValue());
+        this.#firstInitialize = afterNextRender(() => {
+            this.initialValues();
             this.rendered.set(true);
         });
-        // #eff3 = effect(() => console.log(this.getValue()));
-        this.#eff3 = effect(() => {
-            const value = this.getValue();
-            untracked(() => this.initialValues(value));
+        this.#trackChange = effect(() => {
+            this.getValue();
+            untracked(() => this.initialValues());
         });
     }
     setGridDirection(value) {
@@ -9094,35 +9361,49 @@ class AXPGridOptionsWidgetEditComponent extends AXPWidgetComponent {
             this.saveValue({ gridTemplateRows: `repeat(${value}, 1fr)` });
         }
     }
-    setGapMode() {
+    toggleGapMode() {
         if (this.gapMode() === 'single') {
-            this.gapMode.set('both');
-            this.setGap(this.lastGap(), 'both');
+            this.gapMode.set('multiple');
         }
         else {
             this.gapMode.set('single');
-            this.setGap(this.lastGap(), 'x');
-            this.setGap(this.lastGap(), 'y');
+            this.setGap(this.lastGap(), 'both');
         }
     }
     setGap(size, side) {
-        this.gap.set({ ...this.gap(), [side]: size });
-        if (this.gapMode() === 'both') {
-            const gap = this.gap().both + this.gapUnit().both;
-            this.saveValue({ gap });
+        this.lastGap.set(size);
+        if (side === 'both') {
+            this.gap.set({ x: size, y: size });
+            const gapString = this.gap().x + this.gapUnit();
+            this.saveValue({ gap: gapString });
         }
         else {
-            const gap = this.gap().x + this.gapUnit().x + ' ' + this.gap().y + this.gapUnit().y;
-            this.saveValue({ gap });
+            this.gap.update((i) => ({ ...i, [side]: size }));
+            const gapString = this.gap().x + this.gapUnit() + ' ' + this.gap().y + this.gapUnit();
+            this.saveValue({ gap: gapString });
         }
-        this.lastGap.set(size);
     }
     onClick(data) {
-        this.clickedAlign.set(data.alignItems);
-        this.clickedJustify.set(data.justifyItems);
-        this.selectedAlign.set({ value: data.alignItems, label: this.findAlignNameById(data.alignItems) });
-        this.selectedJustify.set({ value: data.justifyItems, label: this.findJustifyNameById(data.justifyItems) });
-        this.saveValue({ alignItems: data.alignItems, justifyItems: data.justifyItems });
+        if (this.clickedAlign() === 'stretch' && this.clickedJustify() === 'stretch') {
+            return;
+        }
+        else if (this.clickedAlign() === 'stretch') {
+            this.clickedJustify.set(data.justifyItems);
+            this.selectedJustify.set({ value: data.justifyItems, label: this.findJustifyNameById(data.justifyItems) });
+            this.saveValue({ justifyItems: data.justifyItems });
+        }
+        else if (this.clickedJustify() === 'stretch') {
+            this.clickedAlign.set(data.alignItems);
+            this.selectedAlign.set({ value: data.alignItems, label: this.findAlignNameById(data.alignItems) });
+            this.saveValue({ alignItems: data.alignItems });
+        }
+        else {
+            this.clickedAlign.set(data.alignItems);
+            this.clickedJustify.set(data.justifyItems);
+            this.selectedAlign.set({ value: data.alignItems, label: this.findAlignNameById(data.alignItems) });
+            this.selectedJustify.set({ value: data.justifyItems, label: this.findJustifyNameById(data.justifyItems) });
+            this.saveValue({ alignItems: data.alignItems, justifyItems: data.justifyItems });
+        }
     }
     onHover(data) {
         this.hoveredAlign.set(data.alignItems);
@@ -9146,35 +9427,104 @@ class AXPGridOptionsWidgetEditComponent extends AXPWidgetComponent {
         }
         this.saveValue({ alignItems: this.clickedAlign() });
     }
-    saveValue(item) {
-        this.setValue({ ...this.getValue(), ...item });
+    changeBreakPoint(event) {
+        if (event.isUserInteraction) {
+            const value = this.getValue();
+            const newBreakpoint = (typeof event.value === 'object' ? event.value.id : event.value);
+            const currentBreakpoint = this.currentBreakpoint();
+            if (newBreakpoint === currentBreakpoint) {
+                return;
+            }
+            this.lastBreakpoint.set(currentBreakpoint);
+            this.currentBreakpoint.set(newBreakpoint);
+            if (value[currentBreakpoint] && value[newBreakpoint] === undefined) {
+                this.setValue({ ...value, [newBreakpoint]: value[currentBreakpoint] });
+            }
+            this.initialValues();
+        }
     }
-    #af;
-    // #eff3 = effect(() => console.log(this.getValue()));
-    #eff3;
-    initialValues(value) {
-        this.clickedJustify.set(value?.justifyItems ?? 'start');
-        this.clickedAlign.set(value?.alignItems ?? 'start');
-        this.gridTemplateRows.set(AXPPropertyEditorHelper.parseGridTemplate(value?.gridTemplateRows));
-        this.gridTemplateColumns.set(AXPPropertyEditorHelper.parseGridTemplate(value?.gridTemplateColumns));
-        const { values, units } = AXPPropertyEditorHelper.parseGap(value?.gap ?? '0px');
-        this.gapUnit.set({ ...units, both: units.x });
-        if (values.x === values.y) {
-            this.gapMode.set('both');
-            this.setGap(values.x, 'both');
+    resetBreakpoint() {
+        if (this.currentBreakpoint() === 'default') {
+            return;
         }
         else {
-            this.gapMode.set('single');
+            const value = cloneDeep(this.getValue());
+            delete value[this.currentBreakpoint()];
+            const newBreakpoint = this.lastBreakpoint();
+            const otherBreakpoints = findNonEmptyBreakpoints(value);
+            this.currentBreakpoint.set(newBreakpoint);
+            const filteredOtherBreakpoints = otherBreakpoints.filter((i) => i !== newBreakpoint);
+            if (filteredOtherBreakpoints.length === 0) {
+                this.lastBreakpoint.set(newBreakpoint);
+            }
+            else {
+                this.lastBreakpoint.set(filteredOtherBreakpoints[filteredOtherBreakpoints.length - 1]);
+            }
+            this.setValue({ ...value });
+            this.initialValues();
+            this.getValue();
+        }
+    }
+    detectConfiguredBreakpoints() {
+        const value = this.getValue();
+        let newBreakpointConfigured = {};
+        Object.keys(value).forEach((key) => {
+            newBreakpointConfigured[key] = true;
+        });
+        this.isBreakpointConfigured.set(newBreakpointConfigured);
+    }
+    saveValue(item) {
+        const value = this.getValue();
+        const breakpoint = this.currentBreakpoint();
+        if (value) {
+            const existingBreakpointValue = value[breakpoint];
+            const newValue = {
+                ...value,
+                [breakpoint]: existingBreakpointValue ? { ...existingBreakpointValue, ...item } : item,
+            };
+            this.setValue(newValue);
+        }
+        else {
+            this.setValue({
+                [breakpoint]: item,
+            });
+        }
+    }
+    #firstInitialize;
+    #trackChange;
+    // #eff1 = effect(() => console.log(this.getValue()));
+    // #eff2 = effect(() => console.log(this.currentBreakpoint(), this.clickedAlign(), this.clickedJustify()));
+    initialValues() {
+        const value = this.getValue();
+        if (value) {
+            if (!this.rendered()) {
+                const keys = findNonEmptyBreakpoints(value);
+                this.currentBreakpoint.set(keys.length === 0 ? 'default' : keys[keys.length - 1]);
+            }
+            const justify = value[this.currentBreakpoint()]?.justifyItems ?? 'stretch';
+            const align = value[this.currentBreakpoint()]?.alignItems ?? 'stretch';
+            this.clickedJustify.set(justify);
+            this.clickedAlign.set(align);
+            this.selectedJustify.set({ value: justify, label: this.findJustifyNameById(justify) });
+            this.selectedAlign.set({ value: align, label: this.findAlignNameById(align) });
+            const rows = AXPPropertyEditorHelper.parseGridTemplate(value[this.currentBreakpoint()]?.gridTemplateRows ?? 'repeat(1, 1fr)');
+            const cols = AXPPropertyEditorHelper.parseGridTemplate(value[this.currentBreakpoint()]?.gridTemplateColumns ?? 'repeat(1, 1fr)');
+            this.gridTemplateRows.set(rows);
+            this.gridTemplateColumns.set(cols);
+            const { values, unit } = AXPPropertyEditorHelper.parseGap(value[this.currentBreakpoint()]?.gap ?? '0px');
             this.setGap(values.x, 'x');
             this.setGap(values.y, 'y');
+            this.gapUnit.set(unit);
+            this.detectConfiguredBreakpoints();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<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>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gap().x\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\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\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gap().y\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\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    <!-- <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  <!-- <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (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\n        class=\"ax-w-24\"\n        (onClick)=\"setGridDirection('column')\"\n        [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>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=\"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            <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          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"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            <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          </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-32\">\n        <ax-select-box\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-32\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\n      [values]=\"gap().both\"\n      (valuesChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n      [changeOnScroll]=\"true\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</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-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\">Column</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-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</div>\n", styles: [".axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i4$2.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", 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>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gridTemplateRows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"\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\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gridTemplateColumns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\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  <!-- <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (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\n        class=\"ax-w-24\"\n        (onClick)=\"setGridDirection('column')\"\n        [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>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') {} @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-32\">\n        <ax-select-box\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-32\">\n        <ax-select-box\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\">\n    @if(gapMode()==='single') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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-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\">\n      <span class=\"ax-text-xs\">Row</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-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\">Column</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-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-breakpoints{font-size:.25rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul{gap:.5rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul>li>label{padding:.25rem!important}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}.axp-grid-option ax-range-slider:not(.ax-exclude){--ax-range-slider-base-thickness: .1rem}.axp-grid-option ax-range-slider:not(.ax-exclude) .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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$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: "19.0.3", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
                         AXButtonGroupModule,
                         AXDecoratorModule,
                         AXSelectBoxModule,
@@ -9183,7 +9533,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXButtonModule,
                         FormsModule,
                         AXRangeSliderModule,
-                    ], template: "<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>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gap().x\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\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\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gap().y\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\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    <!-- <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  <!-- <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (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\n        class=\"ax-w-24\"\n        (onClick)=\"setGridDirection('column')\"\n        [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>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=\"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            <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          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"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            <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          </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-32\">\n        <ax-select-box\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-32\">\n        <ax-select-box\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\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\n      [values]=\"gap().both\"\n      (valuesChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n      [changeOnScroll]=\"true\"\n      class=\"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\">\n      <span class=\"ax-text-xs\">Row</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-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\">Column</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-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</div>\n", styles: [".axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}\n"] }]
+                        AXSelectionListModule,
+                        FormsModule,
+                    ], 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>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gridTemplateRows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"\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\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"gridTemplateColumns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\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  <!-- <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (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\n        class=\"ax-w-24\"\n        (onClick)=\"setGridDirection('column')\"\n        [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>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') {} @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-32\">\n        <ax-select-box\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-32\">\n        <ax-select-box\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\">\n    @if(gapMode()==='single') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\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-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\">\n      <span class=\"ax-text-xs\">Row</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-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\">Column</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-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-breakpoints{font-size:.25rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul{gap:.5rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul>li>label{padding:.25rem!important}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}.axp-grid-option ax-range-slider:not(.ax-exclude){--ax-range-slider-base-thickness: .1rem}.axp-grid-option ax-range-slider:not(.ax-exclude) .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}\n"] }]
         }] });
 
 var gridOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -9312,7 +9664,7 @@ class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", 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  </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            <div style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\">\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--color-ui-input-background);\n                  border-color: var(--color-border-2);\n                  border-radius: 4px;\n                  border-style: solid;\n                  border-width: 1px;\n                  display: flex;\n                  flex: 0 1 auto;\n                  height: 24px;\n                  position: relative;\n                \"\n              >\n                <input\n                  autocomplete=\"off\"\n                  data-wf-text-input=\"true\"\n                  name=\"spacing\"\n                  placeholder=\"\"\n                  aria-label=\"Edit spacing input\"\n                  type=\"text\"\n                  aria-disabled=\"false\"\n                  [value]=\"value\"\n                  (input)=\"setSpacing($event, type, side)\"\n                  style=\"\n                    padding-right: 20px;\n                    background-color: transparent;\n                    border-color: transparent;\n                    border-radius: 4px;\n                    border-style: solid;\n                    border-width: 0px;\n                    box-sizing: border-box;\n                    color: var(--color-text-primary);\n                    cursor: auto;\n                    display: block;\n                    font-family: inherit;\n                    font-size: inherit;\n                    height: 100%;\n                    line-height: 1;\n                    outline: transparent solid 2px;\n                    padding: 0px 4px;\n                    width: 100%;\n                  \"\n                />\n              </div>\n              <div\n                id=\"spacing-UnitSelect\"\n                data-prevent-global-event-handlers=\"true\"\n                tabindex=\"-1\"\n                data-legacy-styled=\"true\"\n                aria-expanded=\"false\"\n                aria-haspopup=\"listbox\"\n                data-focus=\"false\"\n                style=\"\n                  border-color: transparent;\n                  outline: 0px;\n                  cursor: default;\n                  user-select: none;\n                  font-size: 9px;\n                  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n                    Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',\n                    'Segoe UI Symbol', sans-serif;\n                  line-height: 12px;\n                  letter-spacing: -0.115px;\n                  text-transform: none;\n                  color: var(--color-text-primary);\n                  place-self: center stretch;\n                  grid-area: 1 / 2 / 2 / 3;\n                  z-index: 1;\n                  min-width: 16px;\n                  border-radius: 1px;\n                  height: calc(100% - 2px);\n                  text-align: center;\n                  background: transparent;\n                  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;\n                  border-width: 0px;\n                  margin: 1px;\n                  position: relative;\n                  right: 2px;\n                  display: grid;\n                  grid-template-columns: auto;\n                  grid-auto-flow: column;\n                  justify-content: unset;\n                  width: 100%;\n                  flex-grow: unset;\n                  padding: 0px;\n                  box-sizing: border-box;\n                  --component-icon-color: var(--color-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  style=\"\n                    justify-self: start;\n                    width: 100%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                  \"\n                >\n                  PX\n                  <!--PX-->\n                </div>\n              </div>\n            </div>\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\"> {{ units()[this.current().type][this.current().side] }}</span>\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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-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;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.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 rgba(41,41,41,.44)}.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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", 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  </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            <div style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\">\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--color-ui-input-background);\n                  border-color: var(--color-border-2);\n                  border-radius: 4px;\n                  border-style: solid;\n                  border-width: 1px;\n                  display: flex;\n                  flex: 0 1 auto;\n                  height: 24px;\n                  position: relative;\n                \"\n              >\n                <input\n                  autocomplete=\"off\"\n                  data-wf-text-input=\"true\"\n                  name=\"spacing\"\n                  placeholder=\"\"\n                  aria-label=\"Edit spacing input\"\n                  type=\"text\"\n                  aria-disabled=\"false\"\n                  [value]=\"value\"\n                  (input)=\"setSpacing($event, type, side)\"\n                  style=\"\n                    padding-right: 20px;\n                    background-color: transparent;\n                    border-color: transparent;\n                    border-radius: 4px;\n                    border-style: solid;\n                    border-width: 0px;\n                    box-sizing: border-box;\n                    color: var(--color-text-primary);\n                    cursor: auto;\n                    display: block;\n                    font-family: inherit;\n                    font-size: inherit;\n                    height: 100%;\n                    line-height: 1;\n                    outline: transparent solid 2px;\n                    padding: 0px 4px;\n                    width: 100%;\n                  \"\n                />\n              </div>\n              <div\n                id=\"spacing-UnitSelect\"\n                data-prevent-global-event-handlers=\"true\"\n                tabindex=\"-1\"\n                data-legacy-styled=\"true\"\n                aria-expanded=\"false\"\n                aria-haspopup=\"listbox\"\n                data-focus=\"false\"\n                style=\"\n                  border-color: transparent;\n                  outline: 0px;\n                  cursor: default;\n                  user-select: none;\n                  font-size: 9px;\n                  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n                    Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',\n                    'Segoe UI Symbol', sans-serif;\n                  line-height: 12px;\n                  letter-spacing: -0.115px;\n                  text-transform: none;\n                  color: var(--color-text-primary);\n                  place-self: center stretch;\n                  grid-area: 1 / 2 / 2 / 3;\n                  z-index: 1;\n                  min-width: 16px;\n                  border-radius: 1px;\n                  height: calc(100% - 2px);\n                  text-align: center;\n                  background: transparent;\n                  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;\n                  border-width: 0px;\n                  margin: 1px;\n                  position: relative;\n                  right: 2px;\n                  display: grid;\n                  grid-template-columns: auto;\n                  grid-auto-flow: column;\n                  justify-content: unset;\n                  width: 100%;\n                  flex-grow: unset;\n                  padding: 0px;\n                  box-sizing: border-box;\n                  --component-icon-color: var(--color-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  style=\"\n                    justify-self: start;\n                    width: 100%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                  \"\n                >\n                  PX\n                  <!--PX-->\n                </div>\n              </div>\n            </div>\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\"> {{ units()[this.current().type][this.current().side] }}</span>\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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-user-select:-moz-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;-moz-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;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.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 rgba(41,41,41,.44)}.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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$7.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -9367,7 +9719,7 @@ class AXPCronJobWidgetEditComponent extends AXPWidgetComponent {
         this.setValue(e.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPCronJobWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container > </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i1$7.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container > </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i1$8.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPCronJobWidgetEditComponent, decorators: [{
             type: Component,
@@ -9515,7 +9867,7 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     >
     </ax-qrcode>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$8.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$9.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPQrcodeWidgetViewComponent, decorators: [{
             type: Component,
@@ -10202,7 +10554,7 @@ class AXPFilterOperationsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\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-surface 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]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\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-surface 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]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$7.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -10592,7 +10944,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -10722,7 +11074,7 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
@@ -10763,17 +11115,33 @@ class AXPGridWidgetDesignerComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.designerService = inject(AXPDesignerService);
-        // protected cols = computed<number>(() => (this.options()['cols'] as number) ?? 1);
-        // protected rows = computed<number>(() => (this.options()['rows'] as number) ?? 1);
-        // protected gap = computed<number>(() => (this.options()['gap'] as number) ?? 0);
-        this.data = computed(() => this.options()['gridOptions']);
-        this.cols = computed(() => AXPPropertyEditorHelper.parseGridTemplate(this.data().gridTemplateColumns));
-        this.rows = computed(() => AXPPropertyEditorHelper.parseGridTemplate(this.data().gridTemplateRows));
-        this.gap = computed(() => this.data().gap);
-        // #eff = effect(() => console.log(this.data()));
-        // #eff2 = effect(() => console.log(this.rows(), this.cols(), this.cells()));
-        this.cells = computed(() => Array.from({ length: this.cols() * this.rows() }).map((c, index) => index));
+        this.cols = computed(() => this.calcGridRowOrColumn(this.options()['gridOptions']?.default?.gridTemplateColumns ?? 'repeat(1, 1fr)'));
+        this.rows = computed(() => this.calcGridRowOrColumn(this.options()['gridOptions']?.default?.gridTemplateRows ?? 'repeat(1, 1fr)'));
+        this.align = computed(() => this.options()['gridOptions']?.default?.alignItems ?? 'stretch');
+        this.justify = computed(() => this.options()['gridOptions']?.default?.justifyItems ?? 'stretch');
+        this.gap = computed(() => this.options()['gridOptions']?.default?.gap ?? '1px');
+        this.cells = computed(() => this.calcTotalCells(this.options()['gridOptions']?.default?.gridTemplateRows ?? 'repeat(1, 1fr)', this.options()['gridOptions']?.default?.gridTemplateColumns ?? 'repeat(1, 1fr)'));
         this.settled = computed(() => this.cols() * this.rows() > 1 && this.children().length);
+        // eff = effect(() => console.log(this.options()['gridOptions']));
+        this.#rowOrColumnChangeEffect = effect(() => {
+            const deferent = this.cells() - this.children().length;
+            untracked(() => {
+                if (deferent > 0) {
+                    Array.from({ length: deferent })
+                        .map(() => ({
+                        type: AXPWidgetsCatalog.gridItem,
+                    }))
+                        .forEach((node) => {
+                        this.designerService.addWidget(this.node, node);
+                    });
+                }
+                else if (deferent < 0) {
+                    this.children()
+                        .slice(deferent)
+                        .forEach((node) => this.designerService.removeWidget(node));
+                }
+            });
+        });
     }
     handleDrawerSelect(e) {
         this.designerService.update({
@@ -10781,22 +11149,32 @@ class AXPGridWidgetDesignerComponent extends AXPWidgetComponent {
                 // options: e,
                 options: {
                     gridOptions: {
-                        gridTemplateColumns: `repeat(${e.cols}, 1fr)`,
-                        gridTemplateRows: `repeat(${e.rows}, 1fr)`,
-                        gap: '10px',
+                        default: {
+                            gridTemplateColumns: `repeat(${e.cols}, 1fr)`,
+                            gridTemplateRows: `repeat(${e.rows}, 1fr)`,
+                            gap: '10px',
+                        },
                     },
                 },
             },
             mode: 'update',
             widget: this.node,
         });
-        const list = Array.from({ length: this.cells().length }).map(() => ({
+        const list = Array.from({ length: this.cells() }).map(() => ({
             type: AXPWidgetsCatalog.gridItem,
         }));
         list.forEach((node) => {
             this.designerService.addWidget(this.node, node);
         });
     }
+    // eff = effect(() => console.log(this.options()['gridOptions']));
+    #rowOrColumnChangeEffect;
+    calcTotalCells(rows, cols) {
+        return AXPPropertyEditorHelper.parseGridTemplate(rows) * AXPPropertyEditorHelper.parseGridTemplate(cols);
+    }
+    calcGridRowOrColumn(value) {
+        return AXPPropertyEditorHelper.parseGridTemplate(value);
+    }
     get __class() {
         return {
             'ax-widget-container': true,
@@ -10812,7 +11190,12 @@ class AXPGridWidgetDesignerComponent extends AXPWidgetComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @if(settled()) {
-    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }}" [style]="{ gap: gap() }">
+    <div
+      class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-items-{{ align() }} ax-justify-items-{{
+        justify()
+      }} "
+      [style]="{ gap: gap() }"
+    >
       @for (child of children(); track $index) {
       <ng-container
         axp-widget-designer-renderer
@@ -10827,6 +11210,13 @@ class AXPGridWidgetDesignerComponent extends AXPWidgetComponent {
     }@else {
     <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if(false){
+    <div class="ax-hidden">
+      ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+      ax-justify-items-end ax-justify-items-stretch
+    </div>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerGridDrawerComponent, selector: "axp-designer-grid-drawer", inputs: ["rows", "columns"], outputs: ["rowsChange", "columnsChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridWidgetDesignerComponent, decorators: [{
@@ -10835,7 +11225,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'axp-grid-layout-widget',
                     template: `
     @if(settled()) {
-    <div class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }}" [style]="{ gap: gap() }">
+    <div
+      class="ax-grid ax-grid-cols-{{ cols() }} ax-grid-rows-{{ rows() }} ax-items-{{ align() }} ax-justify-items-{{
+        justify()
+      }} "
+      [style]="{ gap: gap() }"
+    >
       @for (child of children(); track $index) {
       <ng-container
         axp-widget-designer-renderer
@@ -10850,6 +11245,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     }@else {
     <axp-designer-grid-drawer (onSelect)="handleDrawerSelect($event)"></axp-designer-grid-drawer>
     }
+    <!--TO BE SURE ALL DYNAMIC TAILWIND CLASSES WORK WELL!-->
+    @if(false){
+    <div class="ax-hidden">
+      ax-items-start ax-items-center ax-items-end ax-items-stretch ax-justify-items-start ax-justify-items-center
+      ax-justify-items-end ax-justify-items-stretch
+    </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXPLayoutBuilderModule, AXPWidgetDesignerRendererDirective, AXPDesignerGridDrawerComponent],
@@ -10955,7 +11357,7 @@ class AXPGridItemWidgetViewComponent extends AXPWidgetComponent {
     @for (child of children(); track $index) {
     <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
@@ -11139,7 +11541,7 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
@@ -11374,7 +11776,7 @@ const AXPTextBlockWidget = {
 
 class AXPWidgetsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [i1$5.AXPLayoutBuilderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [i1$6.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [AXPLayoutBuilderModule.forChild({
                 widgets: [
                     AXPDocumentWidget,
@@ -11385,6 +11787,7 @@ class AXPWidgetsModule {
                     AXPTextBlockWidget,
                     AXPFormFieldWidget,
                     AXPGridWidget,
+                    AXPAdvancedGridWidget,
                     AXPGridItemWidget,
                     AXPGridRowWidget,
                     //
@@ -11437,6 +11840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPTextBlockWidget,
                                 AXPFormFieldWidget,
                                 AXPGridWidget,
+                                AXPAdvancedGridWidget,
                                 AXPGridItemWidget,
                                 AXPGridRowWidget,
                                 //
@@ -11484,5 +11888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_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_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_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, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_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_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_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, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map