@acorex/platform 19.1.2 → 19.1.3

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,4 +1,4 @@
-import * as i1$2 from '@acorex/components/badge';
+import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -6,16 +6,16 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i1$6 from '@acorex/platform/layout/builder';
+import * as i1$7 from '@acorex/platform/layout/builder';
 import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXP_WIDGETS_ADVANCE_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP } from '@acorex/platform/layout/builder';
-import * as i1$1 from '@angular/common';
+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 i3$1 from '@acorex/components/check-box';
+import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i3$2 from '@acorex/components/form';
+import * as i3$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i4$1 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
@@ -24,50 +24,56 @@ import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXPClipBoardService } from '@acorex/platform/common';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i3$3 from '@acorex/components/select-box';
+import * as i3$2 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import * as i7 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i1 from '@acorex/core/translation';
+import * as i1$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDateTimeFormatter } from '@acorex/core/date-time';
-import * as i3$4 from '@acorex/components/datetime-box';
+import * as i3$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import * as i4$2 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
 import { isNumber, sum, get } from 'lodash-es';
-import * as i1$3 from '@acorex/components/number-box';
+import * as i1$4 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i3$5 from '@acorex/components/password-box';
+import * as i3$4 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXPHtmlUtils } from '@acorex/platform/core';
-import * as i1$4 from '@acorex/components/wysiwyg';
+import * as i1$5 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i5$1 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i2$1 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { first, Subscription } from 'rxjs';
-import * as i3$6 from '@acorex/components/switch';
+import * as i3$5 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i5$2 from '@acorex/components/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i2$2 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import * as i1$5 from '@acorex/components/map';
+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$7 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$8 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',
@@ -843,7 +885,7 @@ const AXP_LAYOUT_BORDER_PROPERTY = {
         dataType: 'object',
         defaultValue: {
             dimensions: { top: 0, left: 0, bottom: 0, right: 0 },
-            radius: { 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' },
         },
@@ -943,7 +985,7 @@ class AXPCheckBoxWidgetEditComponent extends AXPWidgetComponent {
       <ax-label>{{ label() }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }, { 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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -998,7 +1040,7 @@ const AXPCheckBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-juhKoygA.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-B_Gec5Qf.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
             component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-BkWcZ4K9.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
@@ -1097,7 +1139,7 @@ class popupComponent extends AXBasePageComponent {
         <ax-button [text]="'apply' | translate | async" color="primary" (onClick)="handleClose(form)"></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { 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: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i3$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { 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: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i3$1.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: popupComponent, decorators: [{
             type: Component,
@@ -1341,7 +1383,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       </ax-prefix>
     </ax-button>
     }
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { 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: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -1521,7 +1563,7 @@ class AXPContactWidgetViewComponent extends AXPWidgetComponent {
       }
     </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContactWidgetViewComponent, decorators: [{
             type: Component,
@@ -1777,7 +1819,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
       ></ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$4.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -2042,7 +2084,7 @@ class AXPEmailBoxWidgetViewComponent extends AXPWidgetComponent {
         }
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEmailBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -2242,7 +2284,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -2545,7 +2587,7 @@ class AXPLargeTextWidgetEditComponent extends AXPWidgetComponent {
       ></ax-validation-rule>
       }
     </ax-text-area>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4$2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -2745,7 +2787,7 @@ class AXPLinkWidgetViewComponent extends AXPWidgetComponent {
       </div>
       }
     </ng-template>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLinkWidgetViewComponent, decorators: [{
             type: Component,
@@ -3060,7 +3102,7 @@ class AXPLinkWidgetEditComponent extends AXPWidgetComponent {
     >
     </ax-select-box>
     } }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLinkWidgetEditComponent, decorators: [{
             type: Component,
@@ -3404,7 +3446,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
       </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3547,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: {
@@ -3676,7 +3721,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPWidgetComponent {
       <ax-clear-button></ax-clear-button>
       }
     </ax-password-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$5.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPasswordBoxModule }, { kind: "component", type: i3$4.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3894,7 +3939,7 @@ class AXPPhoneBoxWidgetViewComponent extends AXPWidgetComponent {
         </ng-container>
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPhoneBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -4073,7 +4118,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPhoneBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4383,7 +4428,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       [options]="validation.options"
     ></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$4.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$4.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$4.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$4.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$4.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$4.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$4.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i1$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i1$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "component", type: i1$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i1$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i1$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i1$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i1$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -4568,7 +4613,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     @for (item of internalValue(); track $index) {
     <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -4599,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]);
             }
         }
     }
@@ -4647,7 +4696,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       ></ax-validation-rule>
       }
     </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4765,7 +4814,7 @@ class AXPSelectBoxWidgetViewComponent extends AXPWidgetComponent {
     @for (item of internalValue(); track $index) {
       <ax-badge [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -4858,7 +4907,7 @@ class AXPSelectionListWidgetViewComponent extends AXPWidgetComponent {
     @for (item of internalValue(); track $index) {
     <ax-badge  [look]="'twotone'" [text]="item[this.textField()]" color="primary"></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectionListWidgetViewComponent, decorators: [{
             type: Component,
@@ -5015,7 +5064,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
       ></ax-validation-rule>
       }
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -5106,7 +5155,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     } }@else {
     <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5296,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>
@@ -5304,7 +5353,7 @@ class AXPTextBoxWidgetEditComponent extends AXPWidgetComponent {
       </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "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: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5333,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>
@@ -5475,7 +5524,7 @@ class AXPToggleWidgetViewComponent extends AXPWidgetComponent {
     <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -5543,7 +5592,7 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
         <ax-label  [textContent]="label()"></ax-label>
       }
   </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$6.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$5.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
@@ -5625,7 +5674,7 @@ class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6052,7 +6101,7 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
         </div>
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -6240,7 +6289,7 @@ class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetViewComponent, decorators: [{
             type: Component,
@@ -6404,7 +6453,7 @@ class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
 
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$2.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$2.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "directive", type: i5$2.AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$2.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$2.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "directive", type: i5$2.AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetEditComponent, decorators: [{
             type: Component,
@@ -6587,7 +6636,7 @@ class AXPMapBoxWidgetViewComponent extends AXPWidgetComponent {
       [latitude]="initialLocation().latitude"
       [longitude]="initialLocation().longitude"
     ></ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$5.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMapBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -6657,7 +6706,7 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
       [maxMarker]="maxMarker()"
     >
     </ax-map>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$5.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers"], outputs: ["onMarkerAdded", "onMarkerChanged", "onLocationFound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMapBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -7103,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',
@@ -7113,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 }); }
@@ -7219,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',
@@ -7229,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 }); }
@@ -7243,7 +7294,7 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
       [mode]="this.mode"
     ></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, decorators: [{
             type: Component,
@@ -7325,7 +7376,7 @@ class AXPPageWidgetViewComponent extends AXPWidgetComponent {
     @for (node of children(); track $index) {
     <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPPageWidgetViewComponent, decorators: [{
             type: Component,
@@ -7410,7 +7461,7 @@ class AXPRepeaterWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="node" [parentNode]="this" [index]="i" [mode]="this.mode"></ng-container>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetViewComponent, decorators: [{
             type: Component,
@@ -7526,7 +7577,7 @@ class AXPRepeaterWidgetEditComponent extends AXPWidgetComponent {
         You haven't added any items yet. Click “Start Adding Items” to get started!
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetEditComponent, decorators: [{
             type: Component,
@@ -7676,7 +7727,7 @@ class AXPRepeaterWidgetDesignerComponent extends AXPWidgetComponent {
        <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -7778,11 +7829,28 @@ const AXPRepeaterWidget = {
 class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
+        this.ngZone = inject(NgZone);
         this.isPaddingLinked = signal(false);
         this.isMarginLinked = signal(false);
+        this.current = signal({
+            type: 'margin',
+            side: 'bottom',
+        });
+        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);
     }
-    setSpacing(e, type, side) {
-        const value = e.value ?? 0;
+    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({
@@ -7803,12 +7871,67 @@ class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
     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: [".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 ax-number-box>div{height:fit-content!important}.axp-spacing-container-box ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}.axp-spacing-container-box ax-check-box>div{display:block!important}.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$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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: i3$1.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: [".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 ax-number-box>div{height:fit-content!important}.axp-spacing-container-box ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}.axp-spacing-container-box ax-check-box>div{display:block!important}.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({
@@ -7837,6 +7960,9 @@ class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
         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();
@@ -7856,7 +7982,7 @@ class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
             });
         }
     }
-    setSameValue(type, value) {
+    setSameValue(value, type) {
         if (type === 'radius') {
             return {
                 'top-right': value,
@@ -7870,11 +7996,20 @@ class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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 class=\"ax-flex ax-items-center ax-justify-center ax-gap-2\">\n      <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isRadiusLinked\"> </ax-check-box>\n    </div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-item ax-border-b\">\n      <ax-number-box\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-item ax-border-b ax-border-l\">\n      <ax-number-box\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    </div>\n    <div class=\"ax-border-radius-item\">\n      <ax-number-box\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-item ax-border-l\">\n      <ax-number-box\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    </div>\n  </div>\n</div>\n", styles: [".ax-border-container-box{display:grid;min-height:5rem;min-width:12rem;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;padding-left:1rem;padding-right:1rem}.ax-border-container-box>.ax-border-radius-side{grid-column:span 1 / span 1;grid-column-start:1;grid-row:span 2 / span 2;grid-row-start:1;display:flex;flex-direction:row;gap:.5rem}.ax-border-container-box>.ax-border-radius-box{grid-column:span 2 / span 2;grid-column-start:2;grid-row:span 2 / span 2;grid-row-start:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));border-radius:.5rem;border-width:1px}.ax-border-container-box>.ax-border-radius-box>.ax-border-radius-item{display:flex;align-items:center;justify-content:center;gap:.5rem}.ax-border-container-box ax-number-box{width:100%}.ax-border-container-box ax-number-box>div{height:fit-content!important;width:2.5rem!important;border-style:none!important}.ax-border-container-box ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}.ax-border-container-box ax-check-box>div{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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: i3$1.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: "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], 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 class=\"ax-flex ax-items-center ax-justify-center ax-gap-2\">\n      <i class=\"fa-regular fa-link\"></i> <ax-check-box [(ngModel)]=\"isRadiusLinked\"> </ax-check-box>\n    </div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-item ax-border-b\">\n      <ax-number-box\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-item ax-border-b ax-border-l\">\n      <ax-number-box\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    </div>\n    <div class=\"ax-border-radius-item\">\n      <ax-number-box\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-item ax-border-l\">\n      <ax-number-box\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    </div>\n  </div>\n</div>\n", styles: [".ax-border-container-box{display:grid;min-height:5rem;min-width:12rem;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;padding-left:1rem;padding-right:1rem}.ax-border-container-box>.ax-border-radius-side{grid-column:span 1 / span 1;grid-column-start:1;grid-row:span 2 / span 2;grid-row-start:1;display:flex;flex-direction:row;gap:.5rem}.ax-border-container-box>.ax-border-radius-box{grid-column:span 2 / span 2;grid-column-start:2;grid-row:span 2 / span 2;grid-row-start:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));border-radius:.5rem;border-width:1px}.ax-border-container-box>.ax-border-radius-box>.ax-border-radius-item{display:flex;align-items:center;justify-content:center;gap:.5rem}.ax-border-container-box ax-number-box{width:100%}.ax-border-container-box ax-number-box>div{height:fit-content!important;width:2.5rem!important;border-style:none!important}.ax-border-container-box ax-number-box>div input{height:1.5rem!important;width:2.5rem!important;padding:.25rem!important;text-align:center!important}.ax-border-container-box ax-check-box>div{display:block!important}\n"] }]
+            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({
@@ -7925,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$7.AXCronJobContainerComponent, selector: "ax-cron-job-container", outputs: ["onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPCronJobWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ax-cron-job-container > </ax-cron-job-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCronJobModule }, { kind: "component", type: i1$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,
@@ -8073,7 +8208,7 @@ class AXPQrcodeWidgetViewComponent extends AXPWidgetComponent {
     >
     </ax-qrcode>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$8.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$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,
@@ -8228,7 +8363,7 @@ class AXPColorBoxWidgetEditComponent extends AXPWidgetComponent {
       <ax-clear-button></ax-clear-button>
       } 
     </ax-color-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -8401,7 +8536,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -8455,7 +8590,7 @@ class AXPFormFieldWidgetDesignerComponent extends AXPWidgetComponent {
        <axp-designer-add-widget-mini-button ></axp-designer-add-widget-mini-button>
      }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFormFieldWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -8531,7 +8666,7 @@ class AXPGridWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridWidgetViewComponent, decorators: [{
             type: Component,
@@ -8741,7 +8876,7 @@ class AXPGridItemWidgetViewComponent extends AXPWidgetComponent {
     @for (child of children(); track $index) {
     <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridItemWidgetViewComponent, decorators: [{
             type: Component,
@@ -8925,7 +9060,7 @@ class AXPGridRowWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridRowWidgetViewComponent, decorators: [{
             type: Component,
@@ -9160,7 +9295,7 @@ const AXPTextBlockWidget = {
 
 class AXPWidgetsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [i1$6.AXPLayoutBuilderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [i1$7.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetsModule, imports: [AXPLayoutBuilderModule.forChild({
                 widgets: [
                     AXPDocumentWidget,
@@ -9252,5 +9387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, 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