@acorex/platform 19.1.1 → 19.1.3

package/fesm2022/acorex-platform-widgets.mjs

@@ -11,7 +11,7 @@ import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBool
 import * as i1$2 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, ChangeDetectorRef, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, ChangeDetectorRef, NgZone, viewChild, 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';
@@ -61,13 +61,19 @@ import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
-import * as i1$8 from '@acorex/components/cron-job';
+import * as i1$8 from '@acorex/components/popover';
+import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
+import * as i4$3 from '@acorex/components/range-slider';
+import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import * as i5$3 from '@acorex/components/button-group';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i2$3 from '@acorex/components/color-box';
+import { AXColorBoxModule } from '@acorex/components/color-box';
+import * as i1$9 from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
-import * as i1$9 from '@acorex/components/qrcode';
+import * as i1$a from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
 import { AXColorUtil } from '@acorex/core/utils';
-import * as i2$3 from '@acorex/components/color-box';
-import { AXColorBoxModule } from '@acorex/components/color-box';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
@@ -537,6 +543,42 @@ function numberDefaultProperty() {
         visible: true,
     };
 }
+function numberMinValueProperty(value) {
+    return {
+        name: 'minValue',
+        title: 'Min Value',
+        group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        order: 9,
+        schema: {
+            dataType: 'number',
+            defaultValue: value,
+            interface: {
+                name: 'minValue',
+                path: 'options.minValue',
+                type: AXPWidgetsCatalog.number,
+            },
+        },
+        visible: true,
+    };
+}
+function numberMaxValueProperty(value) {
+    return {
+        name: 'maxValue',
+        title: 'Max Value',
+        group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        order: 10,
+        schema: {
+            dataType: 'number',
+            defaultValue: value,
+            interface: {
+                name: 'maxValue',
+                path: 'options.maxValue',
+                type: AXPWidgetsCatalog.number,
+            },
+        },
+        visible: true,
+    };
+}
 
 const AXP_LAYOUT_GRID_PROPERTY_GROUP = {
     name: 'grid',
@@ -548,6 +590,11 @@ const AXP_LAYOUT_FLEX_PROPERTY_GROUP = {
     order: 1,
     title: 'Flex Layout',
 };
+const AXP_BOX_MODEL_PROPERTY_GROUP = {
+    name: 'box',
+    order: 1,
+    title: 'BOX MODEL',
+};
 const AXP_LAYOUT_GAP_PROPERTY = {
     name: 'gap',
     title: 'Gap',
@@ -804,7 +851,7 @@ const AXP_LAYOUT_FLEX_PROPERTIES = [
 const AXP_LAYOUT_SPACING_PROPERTY = {
     name: 'spacing',
     title: 'Spacing',
-    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
     schema: {
         dataType: 'object',
         defaultValue: {
@@ -830,6 +877,27 @@ const AXP_LAYOUT_SPACING_PROPERTY = {
     },
     visible: true,
 };
+const AXP_LAYOUT_BORDER_PROPERTY = {
+    name: 'border',
+    title: 'Border',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        defaultValue: {
+            dimensions: { top: 0, left: 0, bottom: 0, right: 0 },
+            radius: { 'top-left': 0, 'top-right': 0, 'bottom-right': 0, 'bottom-left': 0 },
+            colors: { top: 'transparent', left: 'transparent', bottom: 'transparent', right: 'transparent' },
+            styles: { top: 'none', left: 'none', bottom: 'none', right: 'none' },
+        },
+        interface: {
+            name: 'border',
+            path: 'options.border',
+            type: AXPWidgetsCatalog.border,
+            options: {},
+        },
+    },
+    visible: true,
+};
 
 const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
     name: 'width',
@@ -3521,10 +3589,13 @@ const AXPNumberBoxWidget = {
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
+        AXP_HAS_CLEAR_BUTTON_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
         numberDefaultProperty(),
+        numberMinValueProperty(),
+        numberMaxValueProperty(),
         cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
     ],
     components: {
@@ -4573,13 +4644,17 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         this.hasClearButton = computed(() => this.options()['hasClearButton']);
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false);
     }
+    outputs() {
+        return ["selectedItems"];
+    }
     handleValueChange(e) {
+        this.selectedItems.set(e.component.selectedItems);
         if (e.isUserInteraction) {
             if (this.multiple()) {
-                this.setValue(e.component.selectedItems);
+                this.setValue(this.selectedItems());
             }
             else {
-                this.setValue(e.component.selectedItems[0]);
+                this.setValue(this.selectedItems()[0]);
             }
         }
     }
@@ -5270,7 +5345,7 @@ class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
         look="twotone"
         [disabled]="disabled()"
         (onClick)="addItem()"
-        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
       >
         <ax-prefix>
           <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -5307,7 +5382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         look="twotone"
         [disabled]="disabled()"
         (onClick)="addItem()"
-        class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
       >
         <ax-prefix>
           <ax-icon class="fa-solid fa-add"></ax-icon>
@@ -7077,6 +7152,7 @@ class AXPBlockWidgetDesignerComponent extends AXPWidgetComponent {
     }
     get __style() {
         const spacing = this.options()['spacing'];
+        const border = this.options()['border'];
         return {
             'background-color': this.backgroundColor(),
             'padding-top': spacing.padding.top + 'px',
@@ -7087,7 +7163,7 @@ class AXPBlockWidgetDesignerComponent extends AXPWidgetComponent {
             'margin-right': spacing.margin.right + 'px',
             'margin-bottom': spacing.margin.bottom + 'px',
             'margin-left': spacing.margin.left + 'px',
-            transition: 'padding 0.5s ease, margin 0.5s ease',
+            'border-radius': `${border.radius['top-left']}px ${border.radius['top-right']}px ${border.radius['bottom-right']}px ${border.radius['bottom-left']}px`,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -7193,6 +7269,7 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
     }
     get __style() {
         const spacing = this.options()['spacing'];
+        const border = this.options()['border'];
         return {
             'background-color': this.backgroundColor(),
             'padding-top': spacing.padding.top + 'px',
@@ -7203,7 +7280,7 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
             'margin-right': spacing.margin.right + 'px',
             'margin-bottom': spacing.margin.bottom + 'px',
             'margin-left': spacing.margin.left + 'px',
-            transition: 'padding 0.25s ease, margin 0.25s ease',
+            'border-radius': `${border.radius['top-left']}px ${border.radius['top-right']}px ${border.radius['bottom-right']}px ${border.radius['bottom-left']}px`,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -7266,6 +7343,7 @@ const AXPBlockWidget = {
         // cloneProperty(AXP_BG_COLOR_PROPERTY, { schema: { defaultValue: null } }),
         ...AXP_LAYOUT_FLEX_PROPERTIES,
         AXP_LAYOUT_SPACING_PROPERTY,
+        AXP_LAYOUT_BORDER_PROPERTY,
     ],
     components: {
         designer: {
@@ -7751,43 +7829,109 @@ const AXPRepeaterWidget = {
 class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
+        this.ngZone = inject(NgZone);
         this.isPaddingLinked = signal(false);
         this.isMarginLinked = signal(false);
-    }
-    setSpacing(e, type, side) {
-        //if (e.isUserInteraction) {
-        const value = e.value ?? 0;
-        const currentValue = this.getValue();
-        this.setValue({
-            ...currentValue,
-            [type]: {
-                ...currentValue[type],
-                [side]: value,
-            },
+        this.current = signal({
+            type: 'margin',
+            side: 'bottom',
         });
-        if (this.isPaddingLinked() || this.isMarginLinked()) {
-            this.syncSpacing(value, type);
-        }
-        //}
+        this.FixedValues = [
+            { label: '0', value: 0, rowspan: 2 },
+            { label: '5', value: 5 },
+            { label: '10', value: 10 },
+            { label: '25', value: 25 },
+            { label: '50', value: 50 },
+            { label: '75', value: 75 },
+            { label: '100', value: 100 },
+            { label: '150', value: 150 },
+            { label: '200', value: 200 },
+        ];
+        this.popover = viewChild.required(AXPopoverComponent);
     }
-    syncSpacing(value, type) {
-        debugger;
+    setSpacing(input, type, side) {
+        const value = input instanceof Event ? Number.parseInt(input.target.value) : input;
+        const currentValue = this.getValue();
         if ((type === 'padding' && this.isPaddingLinked()) || (type === 'margin' && this.isMarginLinked())) {
             this.setValue({
                 ...this.getValue(),
                 [type]: this.setSameValue(value),
             });
         }
+        else {
+            this.setValue({
+                ...currentValue,
+                [type]: {
+                    ...currentValue[type],
+                    [side]: value,
+                },
+            });
+        }
     }
     setSameValue(value) {
         return { top: value, right: value, bottom: value, left: value };
     }
+    openPopUp(event, type, side) {
+        this.current.set({ type, side, el: event.target });
+        this.popover().target = event.target;
+        this.popover().placement = side === 'right' ? 'bottom-end' : 'bottom';
+        this.popover().open();
+    }
+    listenToMove(event, type, side) {
+        this.ngZone.runOutsideAngular(() => {
+            event.preventDefault();
+            let startY = 0, currentValue = 0;
+            const targetElement = event.target;
+            // Set the cursor style to indicate vertical resizing
+            targetElement.style.cursor = 's-resize'; // Always vertical resize cursor
+            // Initialize dragging by capturing start positions
+            const onMouseDown = (e) => {
+                const { clientY } = this.getClientCoordinates(e); // Only use clientY for vertical movement
+                startY = clientY;
+                // Attach listeners for dragging and release
+                window.addEventListener('mousemove', onMouseMove);
+                window.addEventListener('mouseup', onMouseUp);
+                window.addEventListener('touchmove', onMouseMove);
+                window.addEventListener('touchend', onMouseUp);
+            };
+            // Handle movement during dragging
+            const onMouseMove = (e) => {
+                const { clientY } = this.getClientCoordinates(e); // Only track vertical movement
+                const delta = (clientY - startY) * -1; // Change in vertical position
+                const oldValue = this.getValue()[type][side];
+                currentValue = delta + oldValue;
+                this.ngZone.run(() => {
+                    this.setSpacing(Math.max(currentValue, 0), type, side); // Update spacing, ensuring it is non-negative
+                });
+                // Update start position for the next move
+                startY = clientY;
+            };
+            // Cleanup listeners and reset cursor on release
+            const onMouseUp = () => {
+                window.removeEventListener('mousemove', onMouseMove);
+                window.removeEventListener('mouseup', onMouseUp);
+                window.removeEventListener('touchmove', onMouseMove);
+                window.removeEventListener('touchend', onMouseUp);
+                targetElement.style.cursor = ''; // Reset cursor
+            };
+            // Add the `mousedown` handler to start dragging
+            onMouseDown(event);
+        });
+    }
+    // Utility to get coordinates based on event type
+    getClientCoordinates(e) {
+        if (e instanceof MouseEvent) {
+            return { clientX: e.clientX, clientY: e.clientY };
+        }
+        const touch = e.touches[0];
+        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: "14.0.0", version: "19.0.3", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-container-box\">\n  <div class=\"axp-spacing-content\">\n    <div class=\"axp-spacing-box\">{{ 'Block' }}</div>\n  </div>\n\n  <!-- Margin -->\n  <div class=\"axp-spacing-margin\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Margin</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isMarginLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'top')\"\n        [ngModel]=\"this.getValue().margin.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'right')\"\n        [ngModel]=\"this.getValue().margin.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'bottom')\"\n        [ngModel]=\"this.getValue().margin.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'left')\"\n        [ngModel]=\"this.getValue().margin.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n\n  <!-- Padding -->\n  <div class=\"axp-spacing-padding\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Padding</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isPaddingLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'top')\"\n        [ngModel]=\"this.getValue().padding.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'right')\"\n        [ngModel]=\"this.getValue().padding.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'bottom')\"\n        [ngModel]=\"this.getValue().padding.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'left')\"\n        [ngModel]=\"this.getValue().padding.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n</div>\n", styles: ["ax-number-box>div{height:fit-content!important}ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}ax-check-box>div{display:block!important}.axp-spacing-container-box{display:grid;height:100%;min-height:12rem;width:100%;min-width:12rem;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));font-size:.75rem;line-height:1rem}.axp-spacing-container-box .axp-spacing-box{transition:background-color .3s ease}.axp-spacing-container-box .axp-spacing-top,.axp-spacing-container-box .axp-spacing-left,.axp-spacing-container-box .axp-spacing-right,.axp-spacing-container-box .axp-spacing-bottom,.axp-spacing-container-box .axp-spacing-info,.axp-spacing-container-box .axp-spacing-text{display:flex;align-items:center;justify-content:center}.axp-spacing-container-box .axp-spacing-content,.axp-spacing-container-box .axp-spacing-padding,.axp-spacing-container-box .axp-spacing-margin{display:contents}.axp-spacing-container-box .axp-spacing-content .axp-spacing-box,.axp-spacing-container-box .axp-spacing-padding .axp-spacing-box,.axp-spacing-container-box .axp-spacing-margin .axp-spacing-box{border-radius:.5rem;border-width:1px}.axp-spacing-container-box .axp-spacing-content .axp-spacing-box{grid-column:span 1 / span 1;grid-column-start:3;grid-row:span 1 / span 1;grid-row-start:3;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}.axp-spacing-container-box .axp-spacing-padding *{z-index:1}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-box{grid-column:span 3 / span 3;grid-column-start:2;grid-row:span 3 / span 3;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-text{grid-column-start:2;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-info{grid-column-start:4;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-top{grid-column-start:3;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-right{grid-column-start:4;grid-row-start:3}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-bottom{grid-column-start:3;grid-row-start:4}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-left{grid-column-start:2;grid-row-start:3}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-box{grid-column:span 5 / span 5;grid-column-start:1;grid-row:span 5 / span 5;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-text{grid-column-start:1;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-info{grid-column-start:5;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-top{grid-column-start:3;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-right{grid-column-start:5;grid-row-start:3}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-bottom{grid-column-start:3;grid-row-start:5}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-left{grid-column-start:1;grid-row-start:3}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.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: "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: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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-container-box\">\n  <div class=\"axp-spacing-content\">\n    <div class=\"axp-spacing-box\">{{ 'Block' }}</div>\n  </div>\n\n  <div class=\"axp-spacing-margin\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Margin</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isMarginLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'top')\"\n        [ngModel]=\"this.getValue().margin.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'right')\"\n        [ngModel]=\"this.getValue().margin.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'bottom')\"\n        [ngModel]=\"this.getValue().margin.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'left')\"\n        [ngModel]=\"this.getValue().margin.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n\n  <div class=\"axp-spacing-padding\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Padding</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isPaddingLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'top')\"\n        [ngModel]=\"this.getValue().padding.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'right')\"\n        [ngModel]=\"this.getValue().padding.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'bottom')\"\n        [ngModel]=\"this.getValue().padding.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'left')\"\n        [ngModel]=\"this.getValue().padding.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-flex ax-justify-center ax-items-center ax-py-2\">\n  <div class=\"spacing-container\">\n    <div class=\"spacing-outer-box\">\n      <div class=\"spacing-inner-box\">\n        <div class=\"spacing-margin-box scrollbar\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"scrollbar 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            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'top')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n\"\n                  data-automation-id=\"margin-top-button\"\n                  aria-label=\"Margin top button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'right')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n\"\n                  data-automation-id=\"margin-right-button\"\n                  aria-label=\"Margin right button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'bottom')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n\"\n                  data-automation-id=\"margin-bottom-button\"\n                  aria-label=\"Margin bottom button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'left')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n\"\n                  data-automation-id=\"margin-left-button\"\n                  aria-label=\"Margin left button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <clipPath id=\"margin-outer\">\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width=\"224\"\n                height=\"112\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#margin-outer)\"\n              x=\"0\"\n              y=\"0\"\n              width=\"224\"\n              height=\"112\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n            <clipPath id=\"margin-inner\">\n              <rect\n                x=\"36\"\n                y=\"24\"\n                width=\"152\"\n                height=\"64\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#margin-inner)\"\n              x=\"36\"\n              y=\"24\"\n              width=\"152\"\n              height=\"64\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n          </svg>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'top')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 1 / 2 / 2 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginTop\"\n              data-automation-id=\"margin-top-edit\"\n              aria-label=\"Margin top edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 1 / 2 / 2 / 3;\n              \"\n            >\n              <span>{{ getValue().margin.top }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'right')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 3 / 3 / 4;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginRight\"\n              data-automation-id=\"margin-right-edit\"\n              aria-label=\"Margin right edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 3 / 3 / 4;\n              \"\n            >\n              <span>{{ getValue().margin.right }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'bottom')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 3 / 2 / 4 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginBottom\"\n              data-automation-id=\"margin-bottom-edit\"\n              aria-label=\"Margin bottom edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 3 / 2 / 4 / 3;\n              \"\n            >\n              <span>{{ getValue().margin.bottom }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'left')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 1 / 3 / 2;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginLeft\"\n              data-automation-id=\"margin-left-edit\"\n              aria-label=\"Margin left edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 1 / 3 / 2;\n              \"\n            >\n              <span>{{ getValue().margin.left }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"scrollbar spacing-padding-box\" data-legacy-styled=\"true\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"scrollbar 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            <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            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'top')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n\"\n                  data-automation-id=\"padding-top-button\"\n                  aria-label=\"Padding top button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'right')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n\"\n                  data-automation-id=\"padding-right-button\"\n                  aria-label=\"Padding right button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'bottom')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n\"\n                  data-automation-id=\"padding-bottom-button\"\n                  aria-label=\"Padding bottom button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'left')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n\"\n                  data-automation-id=\"padding-left-button\"\n                  aria-label=\"Padding left button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <clipPath id=\"padding-outer\">\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width=\"150\"\n                height=\"62\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#padding-outer)\"\n              x=\"0\"\n              y=\"0\"\n              width=\"150\"\n              height=\"62\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n            <clipPath id=\"padding-inner\">\n              <rect\n                x=\"36\"\n                y=\"24\"\n                width=\"78\"\n                height=\"14\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#padding-inner)\"\n              x=\"36\"\n              y=\"24\"\n              width=\"78\"\n              height=\"14\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n          </svg>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'top')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 1 / 2 / 2 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingTop\"\n              data-automation-id=\"padding-top-edit\"\n              aria-label=\"Padding top edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 1 / 2 / 2 / 3;\n              \"\n            >\n              <span>{{ this.getValue().padding.top }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'right')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 3 / 3 / 4;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingRight\"\n              data-automation-id=\"padding-right-edit\"\n              aria-label=\"Padding right edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 3 / 3 / 4;\n              \"\n            >\n              <span>{{ this.getValue().padding.right }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'bottom')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 3 / 2 / 4 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingBottom\"\n              data-automation-id=\"padding-bottom-edit\"\n              aria-label=\"Padding bottom edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 3 / 2 / 4 / 3;\n              \"\n            >\n              <span>{{ this.getValue().padding.bottom }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'left')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 1 / 3 / 2;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingLeft\"\n              data-automation-id=\"padding-left-edit\"\n              aria-label=\"Padding left edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 1 / 3 / 2;\n              \"\n            >\n              <span>{{ this.getValue().padding.left }}</span>\n            </div>\n          </div>\n        </div>\n        <svg class=\"spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n          <text x=\"5\" y=\"4\" fill=\"white\" font-weight=\"500\" font-size=\"7\" dominant-baseline=\"hanging\">PADDING</text>\n        </svg>\n\n        <svg class=\"spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n          <text x=\"5\" y=\"4\" fill=\"white\" font-weight=\"500\" font-size=\"7\" dominant-baseline=\"hanging\">MARGIN</text>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    data-legacy-styled=\"true\"\n    style=\"\n      max-width: 239px;\n      min-width: 201px;\n      background: #353535;\n      border-radius: 0.5rem;\n      color: var(--colors-text-secondary, white);\n      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n        'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;\n      font-size: 11.5px;\n      line-height: 16px;\n    \"\n  >\n    <div class=\"popover-container\">\n      <div aria-hidden=\"true\" style=\"width: 16px; height: 16px; cursor: pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          data-wf-icon=\"MarginLeftIcon\"\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 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      <div\n        data-legacy-styled=\"true\"\n        style=\"display: flex; flex-direction: column; justify-content: center; height: 24px\"\n      >\n        <!--INPUT-->\n        <!-- <input\n          aria-orientation=\"horizontal\"\n          aria-valuemax=\"200\"\n          aria-valuemin=\"-200\"\n          data-automation-id=\"style-panel-presets-slider\"\n          max=\"200\"\n          min=\"-200\"\n          step=\"1\"\n          type=\"range\"\n          data-sc=\"VisuallyHidden\"\n          class=\"scrollbar\"\n          [value]=\"value\"\n          style=\"\n            border: 0px;\n            clip: rect(0px, 0px, 0px, 0px);\n            clip-path: inset(50%);\n            height: 1px;\n            margin: 0px -1px -1px 0px;\n            overflow: hidden;\n            padding: 0px;\n            position: absolute;\n            width: 1px;\n            white-space: nowrap;\n          \"\n        />\n        <div\n          data-legacy-styled=\"true\"\n          style=\"position: relative; flex-basis: 2px; border-radius: 4px; background-color: var(--colors-border-1)\"\n        >\n          <div\n            role=\"presentation\"\n            class=\"scrollbar wf-8dbjgt\"\n            style=\"\n              width: 133px;\n              height: 100%;\n              pointer-events: none;\n              height: 100%;\n              position: absolute;\n              top: 0px;\n              left: 0px;\n              border-radius: inherit;\n            \"\n          ></div>\n          <div\n            data-automation-id=\"style-panel-presets-slider-knob\"\n            data-legacy-styled=\"true\"\n            style=\"\n              position: absolute;\n              width: 4px;\n              height: 10px;\n              top: -4px;\n              left: 0px;\n              transform: translate3d(133px, 0px, 0px);\n              cursor: ew-resize;\n              border-radius: 1px;\n              background-color: var(--colors-text-primary);\n              box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 0.5px;\n            \"\n          ></div>\n        </div> -->\n        <!-- <ax-range-slider [min]=\"0\" [max]=\"200\" (valuesChange)=\"setSpacing(1, type, side)\"> </ax-range-slider> -->\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.getValue()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div class=\"scrollbar\" data-sc=\"View\">\n        <div data-sc=\"VStack Stack View\" class=\"scrollbar --styled-hKrpNK wf-1ugflpn\" style=\"--local-gap: 8px\">\n          <div\n            class=\"scrollbar\"\n            data-sc=\"View\"\n            style=\"\n              gap: var(--local-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\n              class=\"scrollbar\"\n              style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\"\n            >\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--colors-ui-input-background);\n                  border-color: var(--colors-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                  class=\"scrollbar\"\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(--colors-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(--colors-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(--colors-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  class=\"scrollbar\"\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\n        data-legacy-styled=\"true\"\n        style=\"\n          display: grid;\n          grid-area: 2 / 1 / 3 / -1;\n          grid-template-columns: repeat(5, 1fr);\n          grid-template-rows: 24px 24px;\n          gap: 4px;\n        \"\n      >\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          data-legacy-styled=\"true\"\n          data-focus=\"false\"\n          tabindex=\"0\"\n          style=\"\n            border-bottom-color: var(--colors-border-1);\n            border-left-color: var(--colors-border-1);\n            border-right-color: var(--colors-border-1);\n            border-top-color: var(--colors-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(--colors-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(--colors-action-secondary-text);\n            background: var(--colors-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 data-legacy-styled=\"true\" class=\"scrollbar ax-truncate\">{{ i.label }}</div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div\n      data-legacy-styled=\"true\"\n      style=\"height: 1px; margin-top: 4px; margin-bottom: 4px; background: var(--colors-border-1); pointer-events: none\"\n    ></div>\n\n    <div\n      (click)=\"setSpacing(0, type, side)\"\n      class=\"ax-cursor-pointer hover:!ax-bg-gray-700\"\n      role=\"option\"\n      data-legacy-styled=\"true\"\n      cursor=\"default\"\n      data-focus=\"false\"\n      tabindex=\"0\"\n      style=\"\n        outline: 0px;\n        user-select: none;\n        padding: 4px 8px;\n        margin: 4px 0px;\n        min-height: 24px;\n        --component-icon-color: var(--colors-text-secondary);\n      \"\n    >\n      <div data-legacy-styled=\"true\" style=\"display: flex; flex-direction: row; align-items: center\">\n        <div data-legacy-styled=\"true\" style=\"min-width: 24px; align-self: center; flex-grow: 1; flex-basis: 0px\">\n          <div\n            data-automation-id=\"reset-style-property-button\"\n            data-legacy-styled=\"true\"\n            style=\"\n              align-items: center;\n              box-sizing: border-box;\n              display: grid;\n              gap: 4px 8px;\n              grid-template-columns: 16px 1fr auto;\n            \"\n          >\n            <div aria-hidden=\"true\" class=\"scrollbar\" style=\"width: 16px; height: 16px\">\n              <svg\n                data-wf-icon=\"UndoIcon\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div data-legacy-styled=\"true\" style=\"align-self: center\">\n          <div\n            style=\"\n              cursor: default;\n              user-select: none;\n              font-size: 11.5px;\n              font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n                'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;\n              font-weight: 400;\n              line-height: 16px;\n              letter-spacing: -0.115px;\n              color: var(--colors-text-secondary);\n              justify-self: end;\n              margin-left: 1px;\n            \"\n          >\n            <!-- <span>Alt + click</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.getValue()[this.current().type][this.current().side]\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".spacing-container{--colors-text-secondary: rgba(255, 255, 255, .67);--colors-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--colors-background-1: #292929;--colors-text-secondary: white;--colors-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18);background-color:var(--colors-background-1);width:15rem}.spacing-container .spacing-outer-box{transform:scale(1.2);align-items:center;box-sizing:border-box;display:grid;gap:8px 4px;grid-column:1/-1;grid-template-columns:44px 1fr;padding:4px}.spacing-container .spacing-inner-box{position:relative;display:grid;margin-top:8px;margin-right:8px;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}.spacing-container .spacing-inner-box .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}.spacing-container .spacing-inner-box .spacing-margin-box::-webkit-scrollbar-thumb{background-color:var(--colors-ui-scrollbar-thumb);background-clip:padding-box;border:2px solid rgba(0,0,0,0);border-radius:10px}.spacing-container .spacing-inner-box .spacing-margin-box::-webkit-scrollbar-track{background-color:transparent;border-radius:10px}.spacing-container .spacing-inner-box .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}.spacing-container .spacing-inner-box .spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.spacing-container .spacing-inner-box .spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.popover-container{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px;--colors-action-secondary-text: white;--colors-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);--colors-border-1: rgba(255, 255, 255, .13)}.popover-container input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.popover-container input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.popover-container input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.popover-container 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)}.popover-container 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)}.scrollbar::-webkit-scrollbar{height:9px;width:9px}.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$8.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$2.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,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXNumberBoxModule, FormsModule, AXCheckBoxModule], inputs: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-spacing-container-box\">\n  <div class=\"axp-spacing-content\">\n    <div class=\"axp-spacing-box\">{{ 'Block' }}</div>\n  </div>\n\n  <!-- Margin -->\n  <div class=\"axp-spacing-margin\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Margin</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isMarginLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'top')\"\n        [ngModel]=\"this.getValue().margin.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'right')\"\n        [ngModel]=\"this.getValue().margin.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'bottom')\"\n        [ngModel]=\"this.getValue().margin.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'left')\"\n        [ngModel]=\"this.getValue().margin.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n\n  <!-- Padding -->\n  <div class=\"axp-spacing-padding\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Padding</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isPaddingLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'top')\"\n        [ngModel]=\"this.getValue().padding.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'right')\"\n        [ngModel]=\"this.getValue().padding.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'bottom')\"\n        [ngModel]=\"this.getValue().padding.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'left')\"\n        [ngModel]=\"this.getValue().padding.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n</div>\n", styles: ["ax-number-box>div{height:fit-content!important}ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}ax-check-box>div{display:block!important}.axp-spacing-container-box{display:grid;height:100%;min-height:12rem;width:100%;min-width:12rem;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));font-size:.75rem;line-height:1rem}.axp-spacing-container-box .axp-spacing-box{transition:background-color .3s ease}.axp-spacing-container-box .axp-spacing-top,.axp-spacing-container-box .axp-spacing-left,.axp-spacing-container-box .axp-spacing-right,.axp-spacing-container-box .axp-spacing-bottom,.axp-spacing-container-box .axp-spacing-info,.axp-spacing-container-box .axp-spacing-text{display:flex;align-items:center;justify-content:center}.axp-spacing-container-box .axp-spacing-content,.axp-spacing-container-box .axp-spacing-padding,.axp-spacing-container-box .axp-spacing-margin{display:contents}.axp-spacing-container-box .axp-spacing-content .axp-spacing-box,.axp-spacing-container-box .axp-spacing-padding .axp-spacing-box,.axp-spacing-container-box .axp-spacing-margin .axp-spacing-box{border-radius:.5rem;border-width:1px}.axp-spacing-container-box .axp-spacing-content .axp-spacing-box{grid-column:span 1 / span 1;grid-column-start:3;grid-row:span 1 / span 1;grid-row-start:3;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,rgba(var(--ax-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-color-primary-300),50%) 0,rgba(var(--ax-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}.axp-spacing-container-box .axp-spacing-padding *{z-index:1}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-box{grid-column:span 3 / span 3;grid-column-start:2;grid-row:span 3 / span 3;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-text{grid-column-start:2;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-info{grid-column-start:4;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-top{grid-column-start:3;grid-row-start:2}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-right{grid-column-start:4;grid-row-start:3}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-bottom{grid-column-start:3;grid-row-start:4}.axp-spacing-container-box .axp-spacing-padding .axp-spacing-left{grid-column-start:2;grid-row-start:3}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-box{grid-column:span 5 / span 5;grid-column-start:1;grid-row:span 5 / span 5;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-text{grid-column-start:1;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-info{grid-column-start:5;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-top{grid-column-start:3;grid-row-start:1}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-right{grid-column-start:5;grid-row-start:3}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-bottom{grid-column-start:3;grid-row-start:5}.axp-spacing-container-box .axp-spacing-margin .axp-spacing-left{grid-column-start:1;grid-row-start:3}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXNumberBoxModule, FormsModule, AXCheckBoxModule, AXPopoverModule, CommonModule, AXRangeSliderModule], inputs: [], template: "<!-- <div class=\"axp-spacing-container-box\">\n  <div class=\"axp-spacing-content\">\n    <div class=\"axp-spacing-box\">{{ 'Block' }}</div>\n  </div>\n\n  <div class=\"axp-spacing-margin\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Margin</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isMarginLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'top')\"\n        [ngModel]=\"this.getValue().margin.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'right')\"\n        [ngModel]=\"this.getValue().margin.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'bottom')\"\n        [ngModel]=\"this.getValue().margin.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setSpacing($event, 'margin', 'left')\"\n        [ngModel]=\"this.getValue().margin.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n\n  <div class=\"axp-spacing-padding\">\n    <div class=\"axp-spacing-box\"></div>\n    <div class=\"axp-spacing-text\">Padding</div>\n    <div class=\"axp-spacing-info\">\n      <div class=\"ax-flex ax-gap-1 ax-justify-center ax-items-center\">\n        <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isPaddingLinked\"> </ax-check-box>\n      </div>\n    </div>\n    <div class=\"axp-spacing-top\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'top')\"\n        [ngModel]=\"this.getValue().padding.top\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-right\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'right')\"\n        [ngModel]=\"this.getValue().padding.right\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-bottom\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'bottom')\"\n        [ngModel]=\"this.getValue().padding.bottom\"\n      ></ax-number-box>\n    </div>\n    <div class=\"axp-spacing-left\">\n      <ax-number-box\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        [minValue]=\"0\"\n        (onValueChanged)=\"setSpacing($event, 'padding', 'left')\"\n        [ngModel]=\"this.getValue().padding.left\"\n      ></ax-number-box>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-flex ax-justify-center ax-items-center ax-py-2\">\n  <div class=\"spacing-container\">\n    <div class=\"spacing-outer-box\">\n      <div class=\"spacing-inner-box\">\n        <div class=\"spacing-margin-box scrollbar\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"scrollbar 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            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'top')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n\"\n                  data-automation-id=\"margin-top-button\"\n                  aria-label=\"Margin top button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'right')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n\"\n                  data-automation-id=\"margin-right-button\"\n                  aria-label=\"Margin right button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'bottom')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n\"\n                  data-automation-id=\"margin-bottom-button\"\n                  aria-label=\"Margin bottom button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n              (touchstart)=\"listenToMove($event, 'margin', 'left')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n\"\n                  data-automation-id=\"margin-left-button\"\n                  aria-label=\"Margin left button\"\n                  mask=\"url(#margin-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <clipPath id=\"margin-outer\">\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width=\"224\"\n                height=\"112\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#margin-outer)\"\n              x=\"0\"\n              y=\"0\"\n              width=\"224\"\n              height=\"112\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n            <clipPath id=\"margin-inner\">\n              <rect\n                x=\"36\"\n                y=\"24\"\n                width=\"152\"\n                height=\"64\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#margin-inner)\"\n              x=\"36\"\n              y=\"24\"\n              width=\"152\"\n              height=\"64\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n          </svg>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'top')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 1 / 2 / 2 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginTop\"\n              data-automation-id=\"margin-top-edit\"\n              aria-label=\"Margin top edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 1 / 2 / 2 / 3;\n              \"\n            >\n              <span>{{ getValue().margin.top }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'right')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 3 / 3 / 4;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginRight\"\n              data-automation-id=\"margin-right-edit\"\n              aria-label=\"Margin right edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 3 / 3 / 4;\n              \"\n            >\n              <span>{{ getValue().margin.right }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'bottom')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 3 / 2 / 4 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginBottom\"\n              data-automation-id=\"margin-bottom-edit\"\n              aria-label=\"Margin bottom edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 3 / 2 / 4 / 3;\n              \"\n            >\n              <span>{{ getValue().margin.bottom }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'margin', 'left')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 1 / 3 / 2;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"marginLeft\"\n              data-automation-id=\"margin-left-edit\"\n              aria-label=\"Margin left edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 1 / 3 / 2;\n              \"\n            >\n              <span>{{ getValue().margin.left }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"scrollbar spacing-padding-box\" data-legacy-styled=\"true\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"scrollbar 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            <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            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'top')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n\"\n                  data-automation-id=\"padding-top-button\"\n                  aria-label=\"Padding top button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'right')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n\"\n                  data-automation-id=\"padding-right-button\"\n                  aria-label=\"Padding right button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'bottom')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n\"\n                  data-automation-id=\"padding-bottom-button\"\n                  aria-label=\"Padding bottom button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: var(--colors-background-1); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <g\n              class=\"hover:ax-brightness-75\"\n              (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n              (touchstart)=\"listenToMove($event, 'padding', 'left')\"\n            >\n              <g>\n                <path\n                  cursor=\"s-resize\"\n                  mode=\"delta\"\n                  fill=\"var(--colors-background-1)\"\n                  d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n\"\n                  data-automation-id=\"padding-left-button\"\n                  aria-label=\"Padding left button\"\n                  mask=\"url(#padding-mask)\"\n                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n                <path\n                  cursor=\"s-resize\"\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                  data-legacy-styled=\"true\"\n                  style=\"color: rgb(85, 85, 85); cursor: s-resize\"\n                ></path>\n              </g>\n            </g>\n            <clipPath id=\"padding-outer\">\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width=\"150\"\n                height=\"62\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#padding-outer)\"\n              x=\"0\"\n              y=\"0\"\n              width=\"150\"\n              height=\"62\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n            <clipPath id=\"padding-inner\">\n              <rect\n                x=\"36\"\n                y=\"24\"\n                width=\"78\"\n                height=\"14\"\n                fill=\"transparent\"\n                rx=\"4\"\n                ry=\"4\"\n                style=\"pointer-events: none\"\n              ></rect>\n            </clipPath>\n            <rect\n              clip-path=\"url(#padding-inner)\"\n              x=\"36\"\n              y=\"24\"\n              width=\"78\"\n              height=\"14\"\n              fill=\"transparent\"\n              rx=\"4\"\n              ry=\"4\"\n              style=\"pointer-events: none; stroke-width: 0px; stroke: var(--colors-border-2)\"\n            ></rect>\n          </svg>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'top')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 1 / 2 / 2 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingTop\"\n              data-automation-id=\"padding-top-edit\"\n              aria-label=\"Padding top edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 1 / 2 / 2 / 3;\n              \"\n            >\n              <span>{{ this.getValue().padding.top }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'right')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 3 / 3 / 4;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingRight\"\n              data-automation-id=\"padding-right-edit\"\n              aria-label=\"Padding right edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 3 / 3 / 4;\n              \"\n            >\n              <span>{{ this.getValue().padding.right }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'bottom')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 3 / 2 / 4 / 3;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingBottom\"\n              data-automation-id=\"padding-bottom-edit\"\n              aria-label=\"Padding bottom edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"local\"\n              data-resettable=\"true\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 3 / 2 / 4 / 3;\n              \"\n            >\n              <span>{{ this.getValue().padding.bottom }}</span>\n            </div>\n          </div>\n          <div\n            data-legacy-styled=\"true\"\n            data-focus=\"false\"\n            tabindex=\"0\"\n            (click)=\"openPopUp($event, 'padding', 'left')\"\n            style=\"\n              border: none;\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              overflow: hidden;\n              text-overflow: ellipsis;\n              white-space: nowrap;\n              grid-area: 2 / 1 / 3 / 2;\n              place-self: center;\n              padding: 2px;\n              height: auto;\n              width: auto;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--colors-text-secondary);\n              position: relative;\n              border-radius: 4px;\n              color: var(--colors-text-secondary);\n              background: transparent;\n              box-sizing: border-box;\n              box-shadow: none;\n            \"\n          >\n            <div\n              mode=\"delta\"\n              name=\"paddingLeft\"\n              data-automation-id=\"padding-left-edit\"\n              aria-label=\"Padding left edit\"\n              data-legacy-styled=\"true\"\n              data-origin=\"default\"\n              data-resettable=\"false\"\n              style=\"\n                cursor: default;\n                user-select: none;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                font-size: 11px;\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                font-weight: 400;\n                line-height: 11px;\n                letter-spacing: -0.115px;\n                display: flex;\n                color: var(--colors-text-secondary);\n                background: transparent;\n                padding: 2px;\n                margin: 0px;\n                border-radius: 2px;\n                max-width: 100%;\n                box-sizing: content-box;\n                place-self: center;\n                position: relative;\n                opacity: 1;\n                align-items: center;\n                justify-content: center;\n                grid-area: 2 / 1 / 3 / 2;\n              \"\n            >\n              <span>{{ this.getValue().padding.left }}</span>\n            </div>\n          </div>\n        </div>\n        <svg class=\"spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n          <text x=\"5\" y=\"4\" fill=\"white\" font-weight=\"500\" font-size=\"7\" dominant-baseline=\"hanging\">PADDING</text>\n        </svg>\n\n        <svg class=\"spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n          <text x=\"5\" y=\"4\" fill=\"white\" font-weight=\"500\" font-size=\"7\" dominant-baseline=\"hanging\">MARGIN</text>\n        </svg>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    data-legacy-styled=\"true\"\n    style=\"\n      max-width: 239px;\n      min-width: 201px;\n      background: #353535;\n      border-radius: 0.5rem;\n      color: var(--colors-text-secondary, white);\n      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n        'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;\n      font-size: 11.5px;\n      line-height: 16px;\n    \"\n  >\n    <div class=\"popover-container\">\n      <div aria-hidden=\"true\" style=\"width: 16px; height: 16px; cursor: pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg\n          data-wf-icon=\"MarginLeftIcon\"\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 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      <div\n        data-legacy-styled=\"true\"\n        style=\"display: flex; flex-direction: column; justify-content: center; height: 24px\"\n      >\n        <!--INPUT-->\n        <!-- <input\n          aria-orientation=\"horizontal\"\n          aria-valuemax=\"200\"\n          aria-valuemin=\"-200\"\n          data-automation-id=\"style-panel-presets-slider\"\n          max=\"200\"\n          min=\"-200\"\n          step=\"1\"\n          type=\"range\"\n          data-sc=\"VisuallyHidden\"\n          class=\"scrollbar\"\n          [value]=\"value\"\n          style=\"\n            border: 0px;\n            clip: rect(0px, 0px, 0px, 0px);\n            clip-path: inset(50%);\n            height: 1px;\n            margin: 0px -1px -1px 0px;\n            overflow: hidden;\n            padding: 0px;\n            position: absolute;\n            width: 1px;\n            white-space: nowrap;\n          \"\n        />\n        <div\n          data-legacy-styled=\"true\"\n          style=\"position: relative; flex-basis: 2px; border-radius: 4px; background-color: var(--colors-border-1)\"\n        >\n          <div\n            role=\"presentation\"\n            class=\"scrollbar wf-8dbjgt\"\n            style=\"\n              width: 133px;\n              height: 100%;\n              pointer-events: none;\n              height: 100%;\n              position: absolute;\n              top: 0px;\n              left: 0px;\n              border-radius: inherit;\n            \"\n          ></div>\n          <div\n            data-automation-id=\"style-panel-presets-slider-knob\"\n            data-legacy-styled=\"true\"\n            style=\"\n              position: absolute;\n              width: 4px;\n              height: 10px;\n              top: -4px;\n              left: 0px;\n              transform: translate3d(133px, 0px, 0px);\n              cursor: ew-resize;\n              border-radius: 1px;\n              background-color: var(--colors-text-primary);\n              box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 0.5px;\n            \"\n          ></div>\n        </div> -->\n        <!-- <ax-range-slider [min]=\"0\" [max]=\"200\" (valuesChange)=\"setSpacing(1, type, side)\"> </ax-range-slider> -->\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.getValue()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div class=\"scrollbar\" data-sc=\"View\">\n        <div data-sc=\"VStack Stack View\" class=\"scrollbar --styled-hKrpNK wf-1ugflpn\" style=\"--local-gap: 8px\">\n          <div\n            class=\"scrollbar\"\n            data-sc=\"View\"\n            style=\"\n              gap: var(--local-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\n              class=\"scrollbar\"\n              style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\"\n            >\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--colors-ui-input-background);\n                  border-color: var(--colors-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                  class=\"scrollbar\"\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(--colors-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(--colors-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(--colors-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  class=\"scrollbar\"\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\n        data-legacy-styled=\"true\"\n        style=\"\n          display: grid;\n          grid-area: 2 / 1 / 3 / -1;\n          grid-template-columns: repeat(5, 1fr);\n          grid-template-rows: 24px 24px;\n          gap: 4px;\n        \"\n      >\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          data-legacy-styled=\"true\"\n          data-focus=\"false\"\n          tabindex=\"0\"\n          style=\"\n            border-bottom-color: var(--colors-border-1);\n            border-left-color: var(--colors-border-1);\n            border-right-color: var(--colors-border-1);\n            border-top-color: var(--colors-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(--colors-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(--colors-action-secondary-text);\n            background: var(--colors-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 data-legacy-styled=\"true\" class=\"scrollbar ax-truncate\">{{ i.label }}</div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div\n      data-legacy-styled=\"true\"\n      style=\"height: 1px; margin-top: 4px; margin-bottom: 4px; background: var(--colors-border-1); pointer-events: none\"\n    ></div>\n\n    <div\n      (click)=\"setSpacing(0, type, side)\"\n      class=\"ax-cursor-pointer hover:!ax-bg-gray-700\"\n      role=\"option\"\n      data-legacy-styled=\"true\"\n      cursor=\"default\"\n      data-focus=\"false\"\n      tabindex=\"0\"\n      style=\"\n        outline: 0px;\n        user-select: none;\n        padding: 4px 8px;\n        margin: 4px 0px;\n        min-height: 24px;\n        --component-icon-color: var(--colors-text-secondary);\n      \"\n    >\n      <div data-legacy-styled=\"true\" style=\"display: flex; flex-direction: row; align-items: center\">\n        <div data-legacy-styled=\"true\" style=\"min-width: 24px; align-self: center; flex-grow: 1; flex-basis: 0px\">\n          <div\n            data-automation-id=\"reset-style-property-button\"\n            data-legacy-styled=\"true\"\n            style=\"\n              align-items: center;\n              box-sizing: border-box;\n              display: grid;\n              gap: 4px 8px;\n              grid-template-columns: 16px 1fr auto;\n            \"\n          >\n            <div aria-hidden=\"true\" class=\"scrollbar\" style=\"width: 16px; height: 16px\">\n              <svg\n                data-wf-icon=\"UndoIcon\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div data-legacy-styled=\"true\" style=\"align-self: center\">\n          <div\n            style=\"\n              cursor: default;\n              user-select: none;\n              font-size: 11.5px;\n              font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n                'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;\n              font-weight: 400;\n              line-height: 16px;\n              letter-spacing: -0.115px;\n              color: var(--colors-text-secondary);\n              justify-self: end;\n              margin-left: 1px;\n            \"\n          >\n            <!-- <span>Alt + click</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.getValue()[this.current().type][this.current().side]\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".spacing-container{--colors-text-secondary: rgba(255, 255, 255, .67);--colors-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--colors-background-1: #292929;--colors-text-secondary: white;--colors-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18);background-color:var(--colors-background-1);width:15rem}.spacing-container .spacing-outer-box{transform:scale(1.2);align-items:center;box-sizing:border-box;display:grid;gap:8px 4px;grid-column:1/-1;grid-template-columns:44px 1fr;padding:4px}.spacing-container .spacing-inner-box{position:relative;display:grid;margin-top:8px;margin-right:8px;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}.spacing-container .spacing-inner-box .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}.spacing-container .spacing-inner-box .spacing-margin-box::-webkit-scrollbar-thumb{background-color:var(--colors-ui-scrollbar-thumb);background-clip:padding-box;border:2px solid rgba(0,0,0,0);border-radius:10px}.spacing-container .spacing-inner-box .spacing-margin-box::-webkit-scrollbar-track{background-color:transparent;border-radius:10px}.spacing-container .spacing-inner-box .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}.spacing-container .spacing-inner-box .spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.spacing-container .spacing-inner-box .spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.popover-container{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px;--colors-action-secondary-text: white;--colors-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);--colors-border-1: rgba(255, 255, 255, .13)}.popover-container input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.popover-container input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.popover-container input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.popover-container 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)}.popover-container 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)}.scrollbar::-webkit-scrollbar{height:9px;width:9px}.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"] }]
         }] });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -7811,6 +7955,84 @@ const AXPSpacingWidget = {
     visible: false,
 };
 
+class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.isRadiusLinked = signal(false);
+    }
+    setRadiusLinked() {
+        this.isRadiusLinked.set(!this.isRadiusLinked());
+    }
+    setBorder(e, type, side) {
+        const value = e.value ?? 0;
+        const currentValue = this.getValue();
+        if (type === 'radius' && this.isRadiusLinked()) {
+            this.setValue({
+                ...this.getValue(),
+                [type]: this.setSameValue(value, type),
+            });
+        }
+        else {
+            this.setValue({
+                ...currentValue,
+                [type]: {
+                    ...currentValue[type],
+                    [side]: value,
+                },
+            });
+        }
+    }
+    setSameValue(value, type) {
+        if (type === 'radius') {
+            return {
+                'top-right': value,
+                'top-left': value,
+                'bottom-right': value,
+                'bottom-left': value,
+            };
+        }
+        else {
+            return { top: value, right: value, bottom: value, left: value };
+        }
+    }
+    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: "14.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-border-container-box\">\n  <div class=\"ax-border-radius-side\">\n    <div class=\"ax-border-radius-text\">Radius</div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-top-start\">\n      <i class=\"fa-regular fa-border-top-left\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-left')\"\n        [ngModel]=\"this.getValue().radius['top-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-top-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-right')\"\n        [ngModel]=\"this.getValue().radius['top-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-top-left ax-rotate-90\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-start\">\n      <i class=\"fa-regular fa-border-bottom-right ax-rotate-90\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-left')\"\n        [ngModel]=\"this.getValue().radius['bottom-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-bottom-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-right')\"\n        [ngModel]=\"this.getValue().radius['bottom-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-bottom-right\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-center ax-text-xs\">\n      <ax-button color=\"ghost\" [toggleable]=\"true\" (onClick)=\"setRadiusLinked()\"\n        ><ax-icon><i class=\"fa-regular fa-link\"></i></ax-icon\n      ></ax-button>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-py-2\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <div>\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      </div>\n      <div>\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      </div>\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider class=\"ax-min-w-28\"></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\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        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Center -->\n      <div class=\"ax-border-box-center ax-col-start-2 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\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          ><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 [selected]=\"true\"\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          ><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          ><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\n      <div class=\"ax-text-sm ax-font-light\">Width</div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n\n      <div class=\"ax-text-sm ax-font-light\">Color</div>\n      <ax-color-box ngModel=\"#3b82f6\"></ax-color-box>\n    </div>\n  </div>\n</div>\n", styles: [".ax-radius-box{--ax-range-slider-base-thickness: .15rem}.ax-radius-box ax-range-slider{padding:.5rem}.ax-radius-box ax-number-box>div>input{padding:0 .2rem!important}.ax-border-box ax-button-group ax-button-group-item{padding:.2rem .55rem}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.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: "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: 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$3.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: i5$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i5$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$3.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,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXNumberBoxModule,
+                        FormsModule,
+                        AXCheckBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXRangeSliderModule,
+                        AXButtonGroupModule,
+                        AXColorBoxModule,
+                    ], template: "<!-- <div class=\"ax-border-container-box\">\n  <div class=\"ax-border-radius-side\">\n    <div class=\"ax-border-radius-text\">Radius</div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-top-start\">\n      <i class=\"fa-regular fa-border-top-left\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-left')\"\n        [ngModel]=\"this.getValue().radius['top-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-top-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-right')\"\n        [ngModel]=\"this.getValue().radius['top-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-top-left ax-rotate-90\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-start\">\n      <i class=\"fa-regular fa-border-bottom-right ax-rotate-90\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-left')\"\n        [ngModel]=\"this.getValue().radius['bottom-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-bottom-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-right')\"\n        [ngModel]=\"this.getValue().radius['bottom-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-bottom-right\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-center ax-text-xs\">\n      <ax-button color=\"ghost\" [toggleable]=\"true\" (onClick)=\"setRadiusLinked()\"\n        ><ax-icon><i class=\"fa-regular fa-link\"></i></ax-icon\n      ></ax-button>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-py-2\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <div>\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      </div>\n      <div>\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      </div>\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider class=\"ax-min-w-28\"></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\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        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\n      </div>\n\n      <!-- Center -->\n      <div class=\"ax-border-box-center ax-col-start-2 ax-row-start-2\">\n        <div class=\"ax-p-1\">\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        </div>\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          ><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 [selected]=\"true\"\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          ><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          ><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\n      <div class=\"ax-text-sm ax-font-light\">Width</div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n\n      <div class=\"ax-text-sm ax-font-light\">Color</div>\n      <ax-color-box ngModel=\"#3b82f6\"></ax-color-box>\n    </div>\n  </div>\n</div>\n", styles: [".ax-radius-box{--ax-range-slider-base-thickness: .15rem}.ax-radius-box ax-range-slider{padding:.5rem}.ax-radius-box ax-number-box>div>input{padding:0 .2rem!important}.ax-border-box ax-button-group ax-button-group-item{padding:.2rem .55rem}\n"] }]
+        }] });
+
+var borderWidgetEditor_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPBorderWidgetEditComponent: AXPBorderWidgetEditComponent
+});
+
+const AXPBorderWidget = {
+    name: 'border',
+    title: 'Box Border',
+    description: 'Editing Elements Border',
+    group: AXP_WIDGETS_EDITOR_GROUP,
+    icon: 'fa-solid fa-border',
+    type: 'editor',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return borderWidgetEditor_component; }).then((c) => c.AXPBorderWidgetEditComponent),
+        },
+    },
+    visible: false,
+};
+
 class AXPCronJobWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -7838,7 +8060,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$8.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$9.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,
@@ -7986,7 +8208,7 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     >
     </ax-qrcode>
     }
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$a.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,
@@ -9109,6 +9331,7 @@ class AXPWidgetsModule {
                     AXPButtonWidget,
                     //
                     AXPSpacingWidget,
+                    AXPBorderWidget,
                 ],
             })] }); }
 }
@@ -9151,6 +9374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPButtonWidget,
                                 //
                                 AXPSpacingWidget,
+                                AXPBorderWidget,
                             ],
                         }),
                     ],
@@ -9163,5 +9387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, 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, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, 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, 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_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_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_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_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, 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, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, plainTextDefaultProperty };
+export { 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, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, 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, 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_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_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, 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, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map