@acorex/platform 19.1.3 → 19.1.4

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,4 +1,4 @@
-import * as i1$3 from '@acorex/components/badge';
+import * as i1$4 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -7,68 +7,71 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 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$2 from '@angular/common';
+import { AXPWidgetComponent, AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGETS_FILTER_GROUP } from '@acorex/platform/layout/builder';
+import * as i1$3 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, NgZone, viewChild, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, HostBinding, signal, effect, ViewEncapsulation, ViewChild, untracked, ChangeDetectorRef, ElementRef, viewChild, afterNextRender, NgZone, model, input, HostListener, NgModule } from '@angular/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/components/common';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i4$1 from '@acorex/components/label';
+import * as i2 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import { AXValidationModule, AXValidationService } from '@acorex/core/validation';
-import * as i2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { AXPClipBoardService } from '@acorex/platform/common';
+import { AXPClipBoardService, AXPFileStorageService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
 import { AXPopupService } from '@acorex/components/popup';
 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$1 from '@acorex/core/translation';
+import * as i1$2 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$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
-import * as i4$2 from '@acorex/components/text-area';
+import * as i4$1 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
 import { isNumber, sum, get } from 'lodash-es';
-import * as i1$4 from '@acorex/components/number-box';
+import * as i1$5 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-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$5 from '@acorex/components/wysiwyg';
+import * as i3$5 from '@acorex/components/toolbar';
+import { AXToolBarModule } from '@acorex/components/toolbar';
+import * as i2$1 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 * as i2$2 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { first, Subscription } from 'rxjs';
-import * as i3$5 from '@acorex/components/switch';
+import * as i2$3 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
+import { AXFileService } from '@acorex/core/file';
 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 * as i2$4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$6 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import { AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerService, AXPDesignerGridDrawerComponent } from '@acorex/platform/layout/designer';
-import * as i1$8 from '@acorex/components/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 * as i4$2 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i2$3 from '@acorex/components/color-box';
+import * as i2$5 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
+import * as i3$6 from '@acorex/components/range-slider';
+import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import * as i1$8 from '@acorex/components/popover';
+import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
 import * as i1$9 from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
 import * as i1$a from '@acorex/components/qrcode';
@@ -855,18 +858,8 @@ const AXP_LAYOUT_SPACING_PROPERTY = {
     schema: {
         dataType: 'object',
         defaultValue: {
-            margin: {
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-            },
-            padding: {
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-            },
+            margin: '0px 0px 0px 0px',
+            padding: '0px 0px 0px 0px',
         },
         interface: {
             name: 'spacing',
@@ -884,10 +877,10 @@ const AXP_LAYOUT_BORDER_PROPERTY = {
     schema: {
         dataType: 'object',
         defaultValue: {
-            dimensions: { top: 0, left: 0, bottom: 0, right: 0 },
-            radius: { 'top-left': 0, 'top-right': 0, 'bottom-right': 0, 'bottom-left': 0 },
-            colors: { top: 'transparent', left: 'transparent', bottom: 'transparent', right: 'transparent' },
-            styles: { top: 'none', left: 'none', bottom: 'none', right: 'none' },
+            width: '0px 0px 0px 0px',
+            radius: '0px 0px 0px 0px',
+            color: '#000000 #000000 #000000 #000000',
+            style: 'none none none none',
         },
         interface: {
             name: 'border',
@@ -898,6 +891,21 @@ const AXP_LAYOUT_BORDER_PROPERTY = {
     },
     visible: true,
 };
+const AXP_LAYOUT_FLEX_PROPERTY = {
+    name: 'flexOptions',
+    title: 'Flex Options',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'flexOptions',
+            path: 'options.flexOptions',
+            type: AXPWidgetsCatalog.flexOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
 
 const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
     name: 'width',
@@ -985,7 +993,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: 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 }); }
+  `, 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1040,10 +1048,10 @@ const AXPCheckBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-B_Gec5Qf.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-designer.component-RCi5IJOR.mjs').then((c) => c.AXPCheckBoxWidgetDesignerComponent),
         },
         view: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-BkWcZ4K9.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-view.component-DU1niJES.mjs').then((c) => c.AXPCheckBoxWidgetViewComponent),
         },
         edit: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -1052,7 +1060,7 @@ const AXPCheckBoxWidget = {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-05nKV-UV.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-jeZBOEhl.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
         },
         filter: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -1139,7 +1147,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$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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -1383,7 +1391,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       </ax-prefix>
     </ax-button>
     }
-  </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 }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -1459,7 +1467,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXValidationModule,
                         AXTranslationModule,
                     ],
-                    inputs: []
                 }]
         }], ctorParameters: () => [], propDecorators: { __class: [{
                 type: HostBinding,
@@ -1563,7 +1570,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$4.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,
@@ -1819,7 +1826,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -2084,7 +2091,7 @@ class AXPEmailBoxWidgetViewComponent extends AXPWidgetComponent {
         }
       </ng-template>
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$4.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,
@@ -2284,7 +2291,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -2587,7 +2594,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$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 }); }
+  `, 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$1.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,
@@ -2787,7 +2794,7 @@ class AXPLinkWidgetViewComponent extends AXPWidgetComponent {
       </div>
       }
     </ng-template>
-  </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 }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$4.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,
@@ -3102,7 +3109,7 @@ class AXPLinkWidgetEditComponent extends AXPWidgetComponent {
     >
     </ax-select-box>
     } }
-  </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 }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -3367,20 +3374,8 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         this.maxValue = computed(() => this.options()['maxValue']);
         this.seprator = computed(() => this.options()['seprator'] ?? null);
         this.placeholder = computed(() => this.options()['placeholder']);
-        this.validationService = inject(AXValidationService);
-        this.validationRules = [];
+        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
         this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
-        this.validateFn = async (value, options) => {
-            const vn = this.validationService.ruleFor(value);
-            this.validationRules.forEach((v) => {
-                const options = { ...v.options };
-                if (v.message)
-                    options.message = v.message;
-                vn.addRule(v.rule, options);
-            });
-            const a = await vn.validate();
-            return { result: a.result, message: a.rules.find((c) => !c.result)?.message };
-        };
     }
     handleValueChange(e, i) {
         if (e.isUserInteraction) {
@@ -3421,7 +3416,9 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled()"
       >
-        <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
+      @for (validation of validationRules(); track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+        }
         @if(clearButton()) {
         <ax-clear-button></ax-clear-button>
         } @if(multiple()){
@@ -3446,7 +3443,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
       </ax-button>
       }
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -3465,7 +3462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled()"
       >
-        <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
+      @for (validation of validationRules(); track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+        }
         @if(clearButton()) {
         <ax-clear-button></ax-clear-button>
         } @if(multiple()){
@@ -3721,7 +3720,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -3939,7 +3938,7 @@ class AXPPhoneBoxWidgetViewComponent extends AXPWidgetComponent {
         </ng-container>
       </ng-template>
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$4.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,
@@ -4118,7 +4117,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -4389,8 +4388,8 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.placeholder = computed(() => this.options()['placeholder']);
-        this.disabled = computed(() => this.options()["disabled"]);
-        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
         this.eff = effect(() => {
             console.log(this.getValue());
         });
@@ -4414,13 +4413,26 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     (onValueChanged)="setWysiwyg($event)"
   >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
-    <ax-wysiwyg-toolbar>
+    <!-- <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
       <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
       <ax-wysiwyg-colors></ax-wysiwyg-colors>
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
-    </ax-wysiwyg-toolbar>
+    </ax-wysiwyg-toolbar> -->
+
+    <ax-toolbar>
+      <ax-prefix>
+        <!-- <ax-wysiwyg-history></ax-wysiwyg-history> <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
+        <ax-wysiwyg-colors></ax-wysiwyg-colors> <ax-wysiwyg-list></ax-wysiwyg-list>
+        <ax-wysiwyg-alignment></ax-wysiwyg-alignment> <ax-wysiwyg-insert></ax-wysiwyg-insert> -->
+        <ax-wysiwyg-history></ax-wysiwyg-history>
+        <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
+        <ax-wysiwyg-colors></ax-wysiwyg-colors>
+        <ax-wysiwyg-list></ax-wysiwyg-list>
+        <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
+      </ax-prefix>
+    </ax-toolbar>
     @for (validation of validationRules(); track $index) {
     <ax-validation-rule
       [rule]="validation.rule"
@@ -4428,7 +4440,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$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 }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXWysiwygModule }, { kind: "component", type: i2$1.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$1.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i2$1.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$1.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$1.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$1.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$1.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$5.AXToolBarComponent, selector: "ax-toolbar" }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -4441,13 +4453,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     (onValueChanged)="setWysiwyg($event)"
   >
     <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
-    <ax-wysiwyg-toolbar>
+    <!-- <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
       <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
       <ax-wysiwyg-colors></ax-wysiwyg-colors>
       <ax-wysiwyg-list></ax-wysiwyg-list>
       <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
-    </ax-wysiwyg-toolbar>
+    </ax-wysiwyg-toolbar> -->
+
+    <ax-toolbar>
+      <ax-prefix>
+        <!-- <ax-wysiwyg-history></ax-wysiwyg-history> <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
+        <ax-wysiwyg-colors></ax-wysiwyg-colors> <ax-wysiwyg-list></ax-wysiwyg-list>
+        <ax-wysiwyg-alignment></ax-wysiwyg-alignment> <ax-wysiwyg-insert></ax-wysiwyg-insert> -->
+        <ax-wysiwyg-history></ax-wysiwyg-history>
+        <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
+        <ax-wysiwyg-colors></ax-wysiwyg-colors>
+        <ax-wysiwyg-list></ax-wysiwyg-list>
+        <ax-wysiwyg-alignment></ax-wysiwyg-alignment>
+      </ax-prefix>
+    </ax-toolbar>
     @for (validation of validationRules(); track $index) {
     <ax-validation-rule
       [rule]="validation.rule"
@@ -4458,7 +4483,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
   </ax-wysiwyg-container>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXWysiwygModule, AXValidationModule, AXFormModule, FormsModule]
+                    imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXWysiwygModule,
+                        AXToolBarModule,
+                        AXValidationModule,
+                        AXFormModule,
+                        FormsModule,
+                    ],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -4613,7 +4646,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$3.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$4.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,
@@ -4696,7 +4729,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -4814,7 +4847,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$3.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$4.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,
@@ -4907,7 +4940,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$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$4.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,
@@ -4979,7 +5012,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent
       [readonly]="readonly()"
     >
     </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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -5064,7 +5097,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$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$2.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,
@@ -5155,7 +5188,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$3.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$4.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,
@@ -5353,7 +5386,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$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 }); }
+  `, 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -5470,6 +5503,7 @@ const AXPTextBoxWidget = {
     description: 'Inputs single-line text',
     group: AXP_WIDGETS_EDITOR_GROUP,
     type: 'editor',
+    defaultFilterWidgetName: 'string-filter',
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
@@ -5511,41 +5545,39 @@ class AXPToggleWidgetViewComponent extends AXPWidgetComponent {
         this.trulyText = computed(() => this.options()['trulyText']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-switch-widget-view", usesInheritance: true, ngImport: i0, template: `
-    @if(getValue()){ @if(trulyText()) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-switch-widget-view", usesInheritance: true, ngImport: i0, template: ` @if(getValue()){ @if(trulyText()) {
     <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
     } @else { @if(negative()) {
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     } @else {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     } } }@else { @if(falsyText()) {
     <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
     } @else { @if(negative()) {
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+    <ax-icon class="fa-solid fa-check 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$3.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$4.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,
             args: [{
                     selector: 'axp-switch-widget-view',
-                    template: `
-    @if(getValue()){ @if(trulyText()) {
+                    template: ` @if(getValue()){ @if(trulyText()) {
     <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
     } @else { @if(negative()) {
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     } @else {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     } } }@else { @if(falsyText()) {
     <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
     } @else { @if(negative()) {
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     } } }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule, AXBadgeModule]
+                    imports: [CommonModule, AXDecoratorModule, AXBadgeModule],
                 }]
         }] });
 
@@ -5560,13 +5592,12 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
         this.disabled = computed(() => this.options()['disabled']);
         this.readonly = computed(() => this.options()['readonly']);
         this.label = computed(() => this.options()['label']);
-        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
         this.color = computed(() => this.options()['color']?.id ?? 'primary');
     }
     get __class() {
         const cls = {};
         //
-        cls['ax-inline'] = true;
+        cls['ax-inline-block'] = true;
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -5578,21 +5609,14 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
           [readonly]="readonly()"
           [color]="color()"
           (onValueChanged)="handleValueChanged($event)">
-          @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              >
-          </ax-validation-rule>
-          }
+         
       </ax-switch>
       @if(label())
       {
         <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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
@@ -5606,14 +5630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           [readonly]="readonly()"
           [color]="color()"
           (onValueChanged)="handleValueChanged($event)">
-          @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-                [rule]="validation.rule"
-                [message]="validation.options?.message"
-                [options]="validation.options"
-              >
-          </ax-validation-rule>
-          }
+         
       </ax-switch>
       @if(label())
       {
@@ -5623,7 +5640,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXFormModule, AXSwitchModule, AXValidationModule, AXLabelModule],
-                    inputs: []
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -5657,24 +5673,24 @@ var toggleWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        this.negative = this.options["negative"];
-        this.trulyText = this.options["trulyText"];
-        this.falsyText = this.options["falsyText"];
+        this.negative = this.options['negative'];
+        this.trulyText = this.options['trulyText'];
+        this.falsyText = this.options['falsyText'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPToggleWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `@if(rawValue){ @if(trulyText){
     <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
     }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     } } }@else { @if(falsyText){
     <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
     }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+    <ax-icon class="fa-solid fa-check 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$3.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$4.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,
@@ -5682,19 +5698,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `@if(rawValue){ @if(trulyText){
     <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
     }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-sanger"> </ax-icon>
+    <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     } } }@else { @if(falsyText){
     <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
     }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark ax-text-success"> </ax-icon>
+    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
     }@else {
     <ax-icon class="fa-solid fa-xmark ax-text-danger"> </ax-icon>
     } } }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXDecoratorModule, AXBadgeModule],
-                    inputs: ['rawValue']
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -5735,7 +5751,6 @@ const AXPToggleWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_STYLE_COLOR_PROPERTY,
-        AXP_VALIDATION_PROPERTY,
         AXP_FALSY_TEXT_PROPERTY,
         AXP_TRULY_TEXT_PROPERTY,
         booleanDefaultProperty(),
@@ -5762,6 +5777,250 @@ const AXPToggleWidget = {
     },
 };
 
+class AXPAvatarWidgetViewComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPAvatarWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+var avatarWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPAvatarWidgetViewComponent: AXPAvatarWidgetViewComponent
+});
+
+class AXPAvatarWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.refId = computed(() => this.options()['refId']);
+        this.refType = computed(() => this.options()['refType']);
+        this.fileService = inject(AXFileService);
+        this.fileStorage = inject(AXPFileStorageService);
+        this.url = signal(null);
+        this.isEmpty = computed(() => this.url() == null);
+        this.markedAsCommited = null;
+        this.markedAsDeleted = null;
+        this.#effect1 = effect(async () => {
+            const fileId = this.getValue();
+            await untracked(async () => {
+                try {
+                    if (fileId) {
+                        this.setStatus(AXPWidgetStatus.Processing);
+                        const info = await this.fileStorage.getInfo(fileId);
+                        this.url.set(info.url ? info.url : null);
+                    }
+                    else {
+                        this.url.set(null);
+                    }
+                    this.setStatus(AXPWidgetStatus.Rendered);
+                }
+                catch (error) {
+                    this.setStatus(AXPWidgetStatus.Error);
+                }
+            });
+        });
+        this.#effect2 = effect(async () => {
+            const status = this.layoutService.status();
+            if (status == AXPPageStatus.Submitted) {
+                if (this.markedAsCommited) {
+                    await this.fileStorage.commit(this.markedAsCommited);
+                    this.markedAsCommited = null;
+                }
+                if (this.markedAsDeleted) {
+                    await this.fileStorage.markForDeletion(this.markedAsDeleted);
+                    this.markedAsDeleted = null;
+                }
+            }
+        });
+    }
+    #effect1;
+    #effect2;
+    async chooseFile() {
+        const files = await this.fileService.choose({ accept: 'image/png, image/jpeg' });
+        const file = files[0];
+        const base64 = await this.fileService.blobToBase64(file);
+        this.url.set(base64);
+        // start upload
+        const info = await this.fileStorage.save({
+            category: 'company-logo',
+            file: file,
+            refId: this.refId(),
+            refType: this.refType(),
+            isPrimary: true,
+        });
+        this.markedAsCommited = info.fileId;
+        this.setValue(info.fileId);
+    }
+    async handleChange() {
+        await this.chooseFile();
+    }
+    async handleRemove() {
+        this.markedAsDeleted = this.getValue();
+        this.setValue(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPAvatarWidgetEditComponent, isStandalone: true, selector: "axp-avatar-widget-edit", usesInheritance: true, ngImport: i0, template: `
+      @if(isBusy()) {
+       <div class="axp-empty axp-state-loading" >
+          <i class="fa-solid fa-spinner-third fa-spin"></i>
+      </div> 
+      }
+      @else if(!url())
+      {
+      <div class="axp-empty" (click)="handleChange()" [class.axp-state-error]="this.status()=='error'" >
+          <i class="fa-solid fa-camera ax-text-3xl ax-text-gray-400"></i>
+      </div>
+      }
+      @else {
+        <div class="axp-content" [class.axp-state-error]="this.status()=='error'" >
+              <div  [style.backgroundImage]="url() ? 'url(' + url() + ')' : ''">
+              </div>
+              <div >
+                <div (click)="handleChange()">
+                  <i class="fa-solid fa-camera "></i>
+                </div>
+                <div (click)="handleRemove()">
+                  <i class="fa-light fa-trash-can  "></i>
+                </div>
+              </div>
+        </div>
+      }
+  `, isInline: true, styles: ["axp-avatar-widget-edit .axp-empty{height:11rem;width:11rem;cursor:pointer;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity, 1));display:flex;align-items:center;justify-content:center}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger-500),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-400),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading i:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-400),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content{cursor:pointer;overflow:hidden;border-radius:.375rem;border-width:1px;display:flex}axp-avatar-widget-edit .axp-content.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger-500),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-content>:first-child{border-start-start-radius:.375rem;border-end-start-radius:.375rem;background-size:cover;background-position:center;height:11rem;width:11rem;border-inline-end-width:1px}axp-avatar-widget-edit .axp-content>:last-child{display:flex;flex-direction:column}axp-avatar-widget-edit .axp-content>:last-child>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-avatar-widget-edit .axp-content>:last-child{overflow:hidden}axp-avatar-widget-edit .axp-content>:last-child>div{display:flex;width:5rem;flex:1 1 0%;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div>i{font-size:1.5rem;line-height:2rem}axp-avatar-widget-edit .axp-content>:last-child>:first-child{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:first-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-800),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-avatar-widget-edit', template: `
+      @if(isBusy()) {
+       <div class="axp-empty axp-state-loading" >
+          <i class="fa-solid fa-spinner-third fa-spin"></i>
+      </div> 
+      }
+      @else if(!url())
+      {
+      <div class="axp-empty" (click)="handleChange()" [class.axp-state-error]="this.status()=='error'" >
+          <i class="fa-solid fa-camera ax-text-3xl ax-text-gray-400"></i>
+      </div>
+      }
+      @else {
+        <div class="axp-content" [class.axp-state-error]="this.status()=='error'" >
+              <div  [style.backgroundImage]="url() ? 'url(' + url() + ')' : ''">
+              </div>
+              <div >
+                <div (click)="handleChange()">
+                  <i class="fa-solid fa-camera "></i>
+                </div>
+                <div (click)="handleRemove()">
+                  <i class="fa-light fa-trash-can  "></i>
+                </div>
+              </div>
+        </div>
+      }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                    ], styles: ["axp-avatar-widget-edit .axp-empty{height:11rem;width:11rem;cursor:pointer;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity, 1));display:flex;align-items:center;justify-content:center}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger-500),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-400),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading i:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-400),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content{cursor:pointer;overflow:hidden;border-radius:.375rem;border-width:1px;display:flex}axp-avatar-widget-edit .axp-content.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger-500),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-content>:first-child{border-start-start-radius:.375rem;border-end-start-radius:.375rem;background-size:cover;background-position:center;height:11rem;width:11rem;border-inline-end-width:1px}axp-avatar-widget-edit .axp-content>:last-child{display:flex;flex-direction:column}axp-avatar-widget-edit .axp-content>:last-child>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-avatar-widget-edit .axp-content>:last-child{overflow:hidden}axp-avatar-widget-edit .axp-content>:last-child>div{display:flex;width:5rem;flex:1 1 0%;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>div>i{font-size:1.5rem;line-height:2rem}axp-avatar-widget-edit .axp-content>:last-child>:first-child{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:first-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-500),var(--tw-text-opacity, 1))}axp-avatar-widget-edit .axp-content>:last-child>:last-child:is(.ax-dark *){--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-800),var(--tw-text-opacity, 1))}\n"] }]
+        }] });
+
+var avatarWidgetEdit_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPAvatarWidgetEditComponent: AXPAvatarWidgetEditComponent
+});
+
+class AXPAvatarWidgetColumnComponent extends AXPColumnWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPAvatarWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{rawValue}}`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: ['rawValue']
+                }]
+        }] });
+
+var avatarWidgetColumn_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPAvatarWidgetColumnComponent: AXPAvatarWidgetColumnComponent
+});
+
+class AXPAvatarWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPAvatarWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+var avatarWidgetPrint_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPAvatarWidgetPrintComponent: AXPAvatarWidgetPrintComponent
+});
+
+class AXPAvatarWidgetDesignerComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPAvatarWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAvatarWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+var avatarWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPAvatarWidgetDesignerComponent: AXPAvatarWidgetDesignerComponent
+});
+
+const AXPAvatarWidget = {
+    name: "avatar",
+    title: "Avatar",
+    icon: "fa-solid fa-image-user",
+    group: AXP_WIDGETS_ADVANCE_GROUP,
+    type: 'editor',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_READONLY_PROPERTY,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return avatarWidgetView_component; }).then((c) => c.AXPAvatarWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return avatarWidgetEdit_component; }).then((c) => c.AXPAvatarWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return avatarWidgetColumn_component; }).then((c) => c.AXPAvatarWidgetColumnComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return avatarWidgetPrint_component; }).then((c) => c.AXPAvatarWidgetPrintComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return avatarWidgetDesigner_component; }).then((c) => c.AXPAvatarWidgetDesignerComponent),
+        },
+    },
+};
+
 class AXPFileBoxWidgetColumnComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPFileBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5792,7 +6051,11 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
         this.accept = computed(() => this.options()['accept']);
         this.description = computed(() => this.options()['description']);
         this.metaData = computed(() => this.options()['metaData']);
-        this.internalValue = computed(() => this.getValue() ? (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]) : [{}]);
+        this.internalValue = computed(() => {
+            if (!this.getValue())
+                return [];
+            return this.getValue() ? (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]) : [{}];
+        });
     }
     handleOnFileUploadComplete(e) {
     }
@@ -5860,7 +6123,7 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    <div class="ax-grid ax-grid-cols-12">
       <div class="ax-col-span-12">
         <ax-uploader-drop-zone
           axUploaderZone
@@ -5868,6 +6131,7 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
           [multiple]="multiple()"
           [accept]="accept()"
           [description]="description()"
+          
           (onFileUploadComplete)="handleOnFileUploadComplete($event)"
           (onFilesUploadComplete)="handleOnFilesUploadComplete($event)"
         ></ax-uploader-drop-zone>
@@ -5879,7 +6143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    <div class="ax-grid ax-grid-cols-12">
       <div class="ax-col-span-12">
         <ax-uploader-drop-zone
           axUploaderZone
@@ -5887,6 +6151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           [multiple]="multiple()"
           [accept]="accept()"
           [description]="description()"
+          
           (onFileUploadComplete)="handleOnFileUploadComplete($event)"
           (onFilesUploadComplete)="handleOnFilesUploadComplete($event)"
         ></ax-uploader-drop-zone>
@@ -5954,6 +6219,8 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
         this.multiple = computed(() => this.options()['multiple']);
         this.downloadable = computed(() => this.options()['downloadable']);
         this.internalValue = computed(() => {
+            if (!this.getValue())
+                return [];
             return Array.isArray(this.getValue()) ? this.getValue().map((item) => this.extractItem(item)) : [this.extractItem(this.getValue())];
         });
         this.downloadSubscription = new Subscription();
@@ -6101,7 +6368,7 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
         </div>
       </ng-template>
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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,
@@ -6289,7 +6556,7 @@ class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.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,
@@ -6453,7 +6720,7 @@ class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
 
       }
     </div>
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.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,
@@ -6615,45 +6882,40 @@ const AXPGalleryWidget = {
 class AXPMapBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.markers = computed(() => this.getValue());
+        this.markers = computed(() => this.getValue()?.markers ?? []);
+        this.polygons = computed(() => this.getValue()?.polygons ?? []);
         this.height = computed(() => this.options()['height'] ?? 300);
         this.zoomLevel = computed(() => this.options()['zoomLevel'] ?? 13);
-        this.initialLocation = computed(() => this.options()['initialLocation'] ?? { latitude: 51.505, longitude: -0.09 }, {
-            equal: (a, b) => {
-                if (a.latitude === b.latitude && a.longitude === b.longitude)
-                    return true;
-                else
-                    return false;
-            },
-        });
+        this.latitude = computed(() => this.options()['latitude'] ?? 35);
+        this.longitude = computed(() => this.options()['longitude'] ?? 51);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMapBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPMapBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
-      [hasDraw]="false"
-      [markers]="markers()"
+      [polygons]="polygons()"
       [zoomLevel]="zoomLevel()"
-      [latitude]="initialLocation().latitude"
-      [longitude]="initialLocation().longitude"
+      [latitude]="latitude()"
+      [longitude]="longitude()"
+      [markers]="markers()"
     ></ax-map>
-  </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 }); }
+  </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", "maxPolygon", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers", "polygons"], outputs: ["onMarkerAdded", "onMarkerChanged", "onPolygonAdded", "onPolygonChanged", "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,
             args: [{
                     template: `<div [style.height.px]="height()" class="ax-w-full">
     <ax-map
-      [hasDraw]="false"
-      [markers]="markers()"
+      [polygons]="polygons()"
       [zoomLevel]="zoomLevel()"
-      [latitude]="initialLocation().latitude"
-      [longitude]="initialLocation().longitude"
+      [latitude]="latitude()"
+      [longitude]="longitude()"
+      [markers]="markers()"
     ></ax-map>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXMapModule],
                     inputs: [],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }] });
 
@@ -6666,26 +6928,22 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.cdr = inject(ChangeDetectorRef);
-        this.markers = computed(() => this.getValue() ?? []);
+        this.markers = computed(() => this.getValue()?.markers ?? []);
+        this.polygons = computed(() => this.getValue()?.polygons ?? []);
         this.hasDraw = computed(() => this.options()['hasDraw'] ?? false);
         this.hasLocate = computed(() => this.options()['hasLocate'] ?? false);
         this.maxMarker = computed(() => this.options()['maxMarker'] ?? 1);
+        this.maxPolygon = computed(() => this.options()['maxPolygon'] ?? 1);
         this.zoomLevel = computed(() => this.options()['zoomLevel'] ?? 13);
-        this.height = computed(() => {
-            this.cdr.markForCheck();
-            return this.options()['height'] ?? 300;
-        });
-        this.initialLocation = computed(() => this.options()['initialLocation'] ?? { latitude: 51.505, longitude: -0.09 }, {
-            equal: (a, b) => {
-                if (a.latitude === b.latitude && a.longitude === b.longitude)
-                    return true;
-                else
-                    return false;
-            },
-        });
+        this.latitude = computed(() => this.options()['latitude'] ?? 35);
+        this.longitude = computed(() => this.options()['longitude'] ?? 51);
+        this.height = computed(() => this.options()['height'] ?? 300);
     }
-    onMarkerChanged(event) {
-        this.setValue(event);
+    onMarkerChanged($event) {
+        this.setValue({ polygons: this.getValue()?.polygons ?? [], markers: $event });
+    }
+    onPolygonChanged($event) {
+        this.setValue({ polygons: $event, markers: this.getValue()?.markers ?? [] });
     }
     get __class() {
         const cls = {};
@@ -6698,15 +6956,19 @@ class AXPMapBoxWidgetEditComponent extends AXPWidgetComponent {
     <ax-map
       class="ax-h-full"
       (onMarkerChanged)="onMarkerChanged($event)"
+      (onPolygonChanged)="onPolygonChanged($event)"
       [hasLocator]="hasLocate()"
       [hasDraw]="hasDraw()"
-      [latitude]="initialLocation().latitude"
-      [longitude]="initialLocation().longitude"
+      [latitude]="latitude()"
+      [longitude]="longitude()"
       [zoomLevel]="zoomLevel()"
       [maxMarker]="maxMarker()"
+      [maxPolygon]="maxPolygon()"
+      [markers]="markers()"
+      [polygons]="polygons()"
     >
     </ax-map>
-  </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 }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$6.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "hasDraw", "hasLocator", "markerPlace", "locatePlace", "markers", "polygons"], outputs: ["onMarkerAdded", "onMarkerChanged", "onPolygonAdded", "onPolygonChanged", "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,
@@ -6715,18 +6977,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <ax-map
       class="ax-h-full"
       (onMarkerChanged)="onMarkerChanged($event)"
+      (onPolygonChanged)="onPolygonChanged($event)"
       [hasLocator]="hasLocate()"
       [hasDraw]="hasDraw()"
-      [latitude]="initialLocation().latitude"
-      [longitude]="initialLocation().longitude"
+      [latitude]="latitude()"
+      [longitude]="longitude()"
       [zoomLevel]="zoomLevel()"
       [maxMarker]="maxMarker()"
+      [maxPolygon]="maxPolygon()"
+      [markers]="markers()"
+      [polygons]="polygons()"
     >
     </ax-map>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXMapModule],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -6786,6 +7052,63 @@ const AXPMapBoxWidget = {
             },
             visible: true,
         },
+        {
+            name: 'maxPolygon',
+            title: 'Max Polygon',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 1,
+                dataType: 'number',
+                interface: {
+                    name: 'maxPolygon',
+                    path: 'options.maxPolygon',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 0,
+                        maxValue: 100,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'latitude',
+            title: 'Latitude',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 35,
+                dataType: 'number',
+                interface: {
+                    name: 'latitude',
+                    path: 'options.latitude',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: -90,
+                        maxValue: 90,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'longitude',
+            title: 'Longitude',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 51,
+                dataType: 'number',
+                interface: {
+                    name: 'longitude',
+                    path: 'options.longitude',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: -180,
+                        maxValue: 180,
+                    },
+                },
+            },
+            visible: true,
+        },
         {
             name: 'zoomLevel',
             title: 'Zoom Level',
@@ -6798,8 +7121,8 @@ const AXPMapBoxWidget = {
                     path: 'options.zoomLevel',
                     type: AXPWidgetsCatalog.number,
                     options: {
-                        minValue: 1,
-                        maxValue: 20,
+                        minValue: 2,
+                        maxValue: 18,
                     },
                 },
             },
@@ -6965,7 +7288,7 @@ class AXPSignatureWidgetEditComponent extends AXPWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
@@ -7063,7 +7386,7 @@ class AXPSignatureWidgetViewComponent extends AXPWidgetComponent {
       <span>{{placeholder()}}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$2.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$4.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSignatureWidgetViewComponent, decorators: [{
             type: Component,
@@ -7154,16 +7477,14 @@ class AXPBlockWidgetDesignerComponent extends AXPWidgetComponent {
         const spacing = this.options()['spacing'];
         const border = this.options()['border'];
         return {
+            // Background
             'background-color': this.backgroundColor(),
-            'padding-top': spacing.padding.top + 'px',
-            'padding-right': spacing.padding.right + 'px',
-            'padding-bottom': spacing.padding.bottom + 'px',
-            'padding-left': spacing.padding.left + 'px',
-            'margin-top': spacing.margin.top + 'px',
-            'margin-right': spacing.margin.right + 'px',
-            'margin-bottom': spacing.margin.bottom + 'px',
-            'margin-left': spacing.margin.left + 'px',
-            'border-radius': `${border.radius['top-left']}px ${border.radius['top-right']}px ${border.radius['bottom-right']}px ${border.radius['bottom-left']}px`,
+            padding: spacing.padding,
+            margin: spacing.margin,
+            'border-radius': border.radius,
+            'border-width': border.width,
+            'border-color': border.color,
+            'border-style': border.style,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -7271,16 +7592,14 @@ class AXPBlockWidgetViewComponent extends AXPWidgetComponent {
         const spacing = this.options()['spacing'];
         const border = this.options()['border'];
         return {
+            // Background
             'background-color': this.backgroundColor(),
-            'padding-top': spacing.padding.top + 'px',
-            'padding-right': spacing.padding.right + 'px',
-            'padding-bottom': spacing.padding.bottom + 'px',
-            'padding-left': spacing.padding.left + 'px',
-            'margin-top': spacing.margin.top + 'px',
-            'margin-right': spacing.margin.right + 'px',
-            'margin-bottom': spacing.margin.bottom + 'px',
-            'margin-left': spacing.margin.left + 'px',
-            'border-radius': `${border.radius['top-left']}px ${border.radius['top-right']}px ${border.radius['bottom-right']}px ${border.radius['bottom-left']}px`,
+            padding: spacing.padding,
+            margin: spacing.margin,
+            'border-radius': border.radius,
+            'border-width': border.width,
+            'border-color': border.color,
+            'border-style': border.style,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBlockWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -7344,6 +7663,7 @@ const AXPBlockWidget = {
         ...AXP_LAYOUT_FLEX_PROPERTIES,
         AXP_LAYOUT_SPACING_PROPERTY,
         AXP_LAYOUT_BORDER_PROPERTY,
+        AXP_LAYOUT_FLEX_PROPERTY,
     ],
     components: {
         designer: {
@@ -7577,7 +7897,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.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,
@@ -7727,7 +8047,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.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,
@@ -7826,55 +8146,686 @@ 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(input, type, side) {
-        const value = input instanceof Event ? Number.parseInt(input.target.value) : input;
-        const currentValue = this.getValue();
-        if ((type === 'padding' && this.isPaddingLinked()) || (type === 'margin' && this.isMarginLinked())) {
-            this.setValue({
-                ...this.getValue(),
-                [type]: this.setSameValue(value),
+/**
+ * Utility class for parsing and handling property editor values like borders, spacing, and units.
+ */
+class AXPPropertyEditorHelper {
+    /**
+     * Expands shorthand input values into full sets for sides or corners.
+     * @param values - Array of input values.
+     * @returns Expanded array of values.
+     */
+    static expandShorthand(values) {
+        switch (values.length) {
+            case 1:
+                return [values[0], values[0], values[0], values[0]];
+            case 2:
+                return [values[0], values[1], values[0], values[1]];
+            case 3:
+                return [values[0], values[1], values[2], values[1]];
+            case 4:
+                return values;
+            default:
+                throw new Error(`Invalid shorthand value count. Input: ${values}`);
+        }
+    }
+    /**
+     * @param values An array of four values to condense.
+     * @returns A condensed string representation of the values.
+     */
+    static condenseShorthand(values) {
+        if (values.length !== 4) {
+            throw new Error('Expected 4 values for condensation.');
+        }
+        if (values[0] === values[1] && values[1] === values[2] && values[2] === values[3]) {
+            return `${values[0]}`;
+        }
+        else if (values[0] === values[2] && values[1] === values[3]) {
+            return `${values[0]} ${values[1]}`;
+        }
+        else if (values[1] === values[3]) {
+            return `${values[0]} ${values[1]} ${values[2]}`;
+        }
+        else {
+            return `${values[0]} ${values[1]} ${values[2]} ${values[3]}`;
+        }
+    }
+    /**
+     * Parses sides (top, left, bottom, right) from a string.
+     * @param input - Input string.
+     * @returns Parsed sides object.
+     */
+    static parseSides(input) {
+        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
+        return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
+    }
+    static parseSidesWithUnits(input) {
+        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
+        return {
+            top: AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
+            right: AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
+            bottom: AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
+            left: AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
+        };
+    }
+    /**
+     * Parses corners (top-left, top-right, bottom-left, bottom-right) from a string.
+     * @param input - Input string.
+     * @returns Parsed corners object.
+     */
+    static parseCorners(input) {
+        const values = this.expandShorthand(input.split(' ').map((value) => value.trim()));
+        return {
+            'top-left': AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
+            'top-right': AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
+            'bottom-left': AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
+            'bottom-right': AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
+        };
+    }
+    /**
+     * Parses a spacing box from strings for margin and padding.
+     * @param input - Spacing box string input.
+     * @returns Parsed spacing box.
+     */
+    static parseSpacingBox(input) {
+        return {
+            margin: this.parseSidesWithUnits(input.margin),
+            padding: this.parseSidesWithUnits(input.padding),
+        };
+    }
+    /**
+     * Parses a border box from strings for width, radius, color, and style.
+     * @param input - Border box string input.
+     * @returns Parsed border box.
+     */
+    static parseBorderBox(input) {
+        return {
+            width: this.parseSidesWithUnits(input.width),
+            radius: this.parseCorners(input.radius),
+            color: this.parseSides(input.color),
+            style: this.parseSides(input.style),
+        };
+    }
+    /**
+     * Reverses a spacing box object into a string representation.
+     * @param input - Spacing box object.
+     * @param units - Units for margin and padding.
+     * @returns String representation of the spacing box.
+     */
+    static parseSpacingBoxReverse(input, units) {
+        const format = (value, unit) => `${value}${unit}`;
+        return {
+            margin: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.margin.top, units.margin.top),
+                format(input.margin.right, units.margin.right),
+                format(input.margin.bottom, units.margin.bottom),
+                format(input.margin.left, units.margin.left),
+            ]),
+            padding: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.padding.top, units.padding.top),
+                format(input.padding.right, units.padding.right),
+                format(input.padding.bottom, units.padding.bottom),
+                format(input.padding.left, units.padding.left),
+            ]),
+        };
+    }
+    /**
+     * Reverses a border box object into a string representation.
+     * @param input - Border box object.
+     * @param units - Units for width, radius, color, and style.
+     * @returns String representation of the border box.
+     */
+    static parseBorderBoxReverse(input, units) {
+        const format = (value, unit) => `${value}${unit}`;
+        return {
+            width: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.width.top, units.width.top),
+                format(input.width.right, units.width.right),
+                format(input.width.bottom, units.width.bottom),
+                format(input.width.left, units.width.left),
+            ]),
+            radius: AXPPropertyEditorHelper.condenseShorthand([
+                format(input.radius['top-left'], units.radius['top-left']),
+                format(input.radius['top-right'], units.radius['top-right']),
+                format(input.radius['bottom-right'], units.radius['bottom-right']),
+                format(input.radius['bottom-left'], units.radius['bottom-left']),
+            ]),
+            color: AXPPropertyEditorHelper.condenseShorthand([
+                `${input.color.top}${units.color.top}`,
+                `${input.color.right}${units.color.right}`,
+                `${input.color.bottom}${units.color.bottom}`,
+                `${input.color.left}${units.color.left}`,
+            ]),
+            style: AXPPropertyEditorHelper.condenseShorthand([
+                `${input.style.top}${units.style.top}`,
+                `${input.style.right}${units.style.right}`,
+                `${input.style.bottom}${units.style.bottom}`,
+                `${input.style.left}${units.style.left}`,
+            ]),
+        };
+    }
+    /**
+     * Parses a value with a unit (e.g., "20px") and returns its numeric value and unit.
+     * @param input - Input string or number.
+     * @returns Object with value and unit.
+     */
+    static getValueWithUnit(input) {
+        if (typeof input === 'number')
+            return { value: input, unit: 'px' };
+        if (input === 'auto')
+            return { value: 0, unit: 'px' };
+        const match = input.match(/^([0-9.]+)([a-z%]*)$/i);
+        if (!match)
+            throw new Error(`Invalid unit format: ${input}`);
+        return { value: parseFloat(match[1]), unit: match[2] || '' };
+    }
+    /**
+     * Reverses a numeric value and unit into a single string.
+     * @param value - Numeric value.
+     * @param unit - Unit string.
+     * @returns Combined string.
+     */
+    static getValueFromUnit(value, unit) {
+        return unit ? `${value}${unit}` : `${value}`;
+    }
+}
+
+const AXP_default_Border_Box_Value = {
+    width: { top: 0, left: 0, bottom: 0, right: 0 },
+    radius: { 'top-left': 0, 'top-right': 0, 'bottom-left': 0, 'bottom-right': 0 },
+    color: { top: '#000000', left: '#000000', bottom: '#000000', right: '#000000' },
+    style: { top: 'none', left: 'none', bottom: 'none', right: 'none' },
+};
+const AXP_default_Border_Box_Units = {
+    width: { top: 'px', left: 'px', bottom: 'px', right: 'px' },
+    radius: { 'top-left': 'px', 'top-right': 'px', 'bottom-left': 'px', 'bottom-right': 'px' },
+    color: { top: '', left: '', bottom: '', right: '' },
+    style: { top: '', left: '', bottom: '', right: '' },
+};
+const AXP_default_Spacing_Box_Value = {
+    padding: { top: 0, left: 0, bottom: 0, right: 0 },
+    margin: { top: 0, left: 0, bottom: 0, right: 0 },
+};
+const AXP_default_Spacing_Box_Units = {
+    padding: { top: 'px', left: 'px', bottom: 'px', right: 'px' },
+    margin: { top: 'px', left: 'px', bottom: 'px', right: 'px' },
+};
+
+class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.el = inject(ElementRef);
+        this.allwidth = signal(0);
+        this.allcolor = signal('rgba(0, 0, 0, 1)');
+        this.allstyle = signal('none');
+        this.allRadius = signal(0);
+        this.units = signal(AXP_default_Border_Box_Units);
+        this.lastRadius = signal(null);
+        this.rendered = signal(false);
+        this.currentActiveSide = signal('all');
+        this.currentActiveRadiusSide = signal('all');
+        this.allBorderEl = viewChild('allBorderEl');
+        this.allRadiusEl = viewChild('allRadiusEl');
+        this.calculatedValues = signal(AXP_default_Border_Box_Value);
+        this.shownWidth = computed(() => this.currentActiveSide() === 'all'
+            ? this.allwidth()
+            : this.calculatedValues().width[this.currentActiveSide()]);
+        // protected shownRadius = computed(() => {
+        //   return this.currentActiveRadiusSide() === 'all'
+        //     ? this.allRadius()
+        //     : (this.calculatedValues().radius[this.currentActiveRadiusSide() as AXPPropertyEditorCornerValues] as number);
+        // });
+        this.shownColor = computed(() => this.currentActiveSide() === 'all'
+            ? this.allcolor()
+            : this.calculatedValues().color[this.currentActiveSide()]);
+        this.shownStyle = computed(() => this.currentActiveSide() === 'all'
+            ? this.allstyle()
+            : this.calculatedValues().style[this.currentActiveSide()]);
+        this.afterRender = afterNextRender(() => {
+            if (this.getValue()) {
+                this.calculatedValues.set(AXPPropertyEditorHelper.parseBorderBox(this.getValue()));
+            }
+            this.initializeBorder();
+            this.initializeRadius();
+            this.rendered.set(true);
+        });
+    }
+    setBorder(value, type, side) {
+        if (!this.rendered()) {
+            return;
+        }
+        const currentValue = this.calculatedValues();
+        if (type === 'radius') {
+            this.lastRadius.set(value);
+        }
+        if (side === 'all') {
+            this.updateAllValues(type, value);
+            this.calculatedValues.set({
+                ...currentValue,
+                [type]: this.getUpdatedAllValues(type, value),
             });
         }
         else {
-            this.setValue({
+            this.calculatedValues.set({
                 ...currentValue,
-                [type]: {
-                    ...currentValue[type],
-                    [side]: value,
-                },
+                [type]: { ...currentValue[type], [side]: value },
+            });
+        }
+        const data = AXPPropertyEditorHelper.parseBorderBoxReverse(this.calculatedValues(), this.units());
+        this.setValue(data);
+    }
+    updateAllValues(type, value) {
+        if (type === 'width')
+            this.allwidth.set(value);
+        if (type === 'color')
+            this.allcolor.set(value);
+        if (type === 'radius')
+            this.allRadius.set(value);
+        if (type === 'style')
+            this.allstyle.set(value);
+    }
+    getUpdatedAllValues(type, value) {
+        return type === 'radius'
+            ? { 'top-left': value, 'top-right': value, 'bottom-left': value, 'bottom-right': value }
+            : { top: value, left: value, bottom: value, right: value };
+    }
+    handleActiveBorderSide(event) {
+        event.stopPropagation();
+        if (this.currentActiveBorderEl) {
+            this.currentActiveBorderEl.style.backgroundColor = 'transparent';
+        }
+        this.currentActiveBorderEl = event.currentTarget;
+        const newActiveSide = this.currentActiveBorderEl.name;
+        const previousActiveSide = this.currentActiveSide();
+        if (newActiveSide === 'all' && previousActiveSide !== 'all') {
+            const lastValues = this.calculatedValues();
+            const lastUnits = this.units();
+            const lastWidth = lastValues.width[previousActiveSide];
+            const lastColor = lastValues.color[previousActiveSide];
+            const lastStyle = lastValues.style[previousActiveSide];
+            const lastRadiusObject = lastValues.radius;
+            const lastWidthUnit = lastUnits.width[previousActiveSide];
+            const lastColorUnit = lastUnits.color[previousActiveSide];
+            const lastStyleUnit = lastUnits.style[previousActiveSide];
+            const lastRadiusObjectUnit = lastUnits.radius;
+            this.allwidth.set(lastWidth);
+            this.allcolor.set(lastColor);
+            this.allstyle.set(lastStyle);
+            this.units.set({
+                width: this.createUniformValues(lastWidthUnit),
+                color: this.createUniformValues(lastColorUnit),
+                style: this.createUniformValues(lastStyleUnit),
+                radius: lastRadiusObjectUnit,
+            });
+            this.calculatedValues.set({
+                width: this.createUniformValues(lastWidth),
+                color: this.createUniformValues(lastColor),
+                style: this.createUniformValues(lastStyle),
+                radius: lastRadiusObject,
             });
+            const data = AXPPropertyEditorHelper.parseBorderBoxReverse(this.calculatedValues(), this.units());
+            this.setValue(data);
+        }
+        this.currentActiveSide.set(newActiveSide);
+        this.currentActiveBorderEl.style.backgroundColor = 'var(--focus-color)';
+    }
+    handleActiveRadiusSide(event) {
+        event.stopPropagation();
+        if (this.currentActiveRadiusEl) {
+            this.currentActiveRadiusEl.style.backgroundColor = 'transparent';
+        }
+        this.currentActiveRadiusEl = event.currentTarget;
+        const newActiveRadiusSide = this.currentActiveRadiusEl.name;
+        if (newActiveRadiusSide === 'all' && this.lastRadius() !== null) {
+            this.calculatedValues.update((old) => ({
+                ...old,
+                radius: {
+                    'bottom-left': this.lastRadius(),
+                    'bottom-right': this.lastRadius(),
+                    'top-left': this.lastRadius(),
+                    'top-right': this.lastRadius(),
+                },
+            }));
+            this.allRadius.set(this.lastRadius());
+            const data = AXPPropertyEditorHelper.parseBorderBoxReverse(this.calculatedValues(), this.units());
+            this.setValue(data);
+        }
+        this.currentActiveRadiusSide.set(newActiveRadiusSide);
+        this.currentActiveRadiusEl.style.backgroundColor = 'var(--focus-color)';
+    }
+    initializeBorder() {
+        const widthValue = this.calculatedValues().width;
+        const widthColor = this.calculatedValues().color;
+        const widthStyle = this.calculatedValues().style;
+        const [firstWidthValue, ...restWidthValues] = Object.values(widthValue);
+        const [firstColorValue, ...restColorValues] = Object.values(widthColor);
+        const [firstStyleValue, ...restStyleValues] = Object.values(widthStyle);
+        if (restWidthValues.every((value) => value === firstWidthValue) &&
+            restColorValues.every((value) => value === firstColorValue) &&
+            restStyleValues.every((value) => value === firstStyleValue)) {
+            this.allcolor.set(firstColorValue);
+            this.allstyle.set(firstStyleValue);
+            this.allwidth.set(firstWidthValue);
+            this.currentActiveSide.set('all');
+            this.currentActiveBorderEl = this.allBorderEl()?.nativeElement;
+            if (this.currentActiveBorderEl) {
+                this.currentActiveBorderEl.style.backgroundColor = 'var(--focus-color)';
+            }
+        }
+        else {
+            const sides = ['top', 'right', 'bottom', 'left'];
+            for (const side of sides) {
+                if (widthValue[side]) {
+                    this.currentActiveSide.set(side);
+                    const element = this.el.nativeElement.querySelector(`button[name="${side}"]`);
+                    if (element) {
+                        this.currentActiveBorderEl = element;
+                        element.style.backgroundColor = 'var(--focus-color)';
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    initializeRadius() {
+        const values = this.calculatedValues().radius;
+        const [firstValue, ...restValues] = Object.values(values);
+        if (restValues.every((value) => value === firstValue)) {
+            this.currentActiveRadiusSide.set('all');
+            this.currentActiveRadiusEl = this.allRadiusEl()?.nativeElement;
+            if (this.currentActiveRadiusEl) {
+                this.currentActiveRadiusEl.style.backgroundColor = 'var(--focus-color)';
+                this.allRadius.set(firstValue);
+            }
+        }
+        else {
+            const element = this.el.nativeElement.querySelector(`button[name="sides"]`);
+            if (element) {
+                this.currentActiveRadiusSide.set('sides');
+                this.currentActiveRadiusEl = element;
+                element.style.backgroundColor = 'var(--focus-color)';
+            }
+        }
+    }
+    createUniformValues(value) {
+        return {
+            top: value,
+            right: value,
+            bottom: value,
+            left: value,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$6.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$5.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXNumberBoxModule,
+                        FormsModule,
+                        AXCheckBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXRangeSliderModule,
+                        AXButtonGroupModule,
+                        AXColorBoxModule,
+                    ], template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"] }]
+        }] });
+
+var borderWidgetEditor_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPBorderWidgetEditComponent: AXPBorderWidgetEditComponent
+});
+
+const AXPBorderWidget = {
+    name: 'border',
+    title: 'Box Border',
+    description: 'Editing Elements Border',
+    group: AXP_WIDGETS_EDITOR_GROUP,
+    icon: 'fa-solid fa-border',
+    type: 'editor',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return borderWidgetEditor_component; }).then((c) => c.AXPBorderWidgetEditComponent),
+        },
+    },
+    visible: false,
+};
+
+const AXP_Flex_Sides = [
+    { id: 'top-left', name: 'Top Left', align: 'flex-start', justify: 'flex-start' },
+    { id: 'top-center', name: 'Top Center', align: 'flex-start', justify: 'center' },
+    { id: 'top-right', name: 'Top Right', align: 'flex-start', justify: 'flex-end' },
+    { id: 'left', name: 'Left', align: 'center', justify: 'flex-start' },
+    { id: 'center', name: 'Center', align: 'center', justify: 'center' },
+    { id: 'right', name: 'Right', align: 'center', justify: 'flex-end' },
+    { id: 'bottom-left', name: 'Bottom Left', align: 'flex-end', justify: 'flex-start' },
+    { id: 'bottom-center', name: 'Bottom Center', align: 'flex-end', justify: 'center' },
+    { id: 'bottom-right', name: 'Bottom Right', align: 'flex-end', justify: 'flex-end' },
+];
+const AXP_Flex_Justify = [
+    { id: 'flex-start', name: 'Start' },
+    { id: 'flex-end', name: 'End' },
+    { id: 'center', name: 'Center' },
+    { id: 'space-between', name: 'Space Between' },
+    { id: 'space-around', name: 'Space Around' },
+];
+const AXP_Flex_Align = [
+    { id: 'flex-start', name: 'Start' },
+    { id: 'flex-end', name: 'End' },
+    { id: 'center', name: 'Center' },
+    { id: 'stretch', name: 'Stretch' },
+    { id: 'baseline', name: 'Baseline' },
+];
+// export type AXPFlexJustifyId = (typeof AXP_Flex_Justify)[number]['id'];
+// export type AXPFlexAlignId = (typeof AXP_Flex_Align)[number]['id'];
+
+class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.flexSides = AXP_Flex_Sides;
+        this.flexDirection = signal('row');
+        this.flexDirectionIsColumn = computed(() => this.flexDirection().includes('column'));
+        this.gapMode = signal('single');
+        this.gap = signal({ both: 0, x: 0, y: 0 });
+        this.selectedJustify = signal({ id: 'flex-start', name: 'Start' });
+        this.selectedAlign = signal({ id: 'flex-start', name: 'Start' });
+        this.hoveredAlign = signal(null);
+        this.hoveredJustify = signal(null);
+        this.clickedAlign = signal('flex-start');
+        this.clickedJustify = signal('flex-start');
+        this.justifyDataSource = new AXDataSource({
+            pageSize: 99,
+            load: async (e) => {
+                return {
+                    items: AXP_Flex_Justify,
+                    total: AXP_Flex_Justify.length,
+                };
+            },
+        });
+        this.alignDataSource = new AXDataSource({
+            pageSize: 99,
+            load: async (e) => {
+                return {
+                    items: AXP_Flex_Align,
+                    total: AXP_Flex_Align.length,
+                };
+            },
+        });
+        this.findAlignNameById = (id) => {
+            const side = AXP_Flex_Align.find((side) => side.id === id);
+            return side?.name;
+        };
+        this.findJustifyNameById = (id) => {
+            const side = AXP_Flex_Justify.find((side) => side.id === id);
+            return side?.name;
+        };
+    }
+    setFlexMode() {
+        if (this.gapMode() === 'single') {
+            this.gapMode.set('dual');
+        }
+        else {
+            this.gapMode.set('single');
+        }
+    }
+    setFlexDirection(type) {
+        this.flexDirection.set(type);
+    }
+    setGap(size, side) {
+        this.gap.set({ ...this.gap(), [side]: size });
+    }
+    onClick(data) {
+        if (this.clickedAlign() === 'stretch') {
+            this.clickedJustify.set(data.justify);
+            this.selectedJustify.set({ id: data.justify, name: this.findJustifyNameById(data.justify) });
+        }
+        else if (this.clickedAlign() === 'baseline' && data.align === 'flex-start') {
+            this.clickedJustify.set(data.justify);
+            this.selectedJustify.set({ id: data.justify, name: this.findJustifyNameById(data.justify) });
+        }
+        else if (this.clickedJustify() === 'space-between') {
+            this.clickedAlign.set(data.align);
+            this.selectedAlign.set({ id: data.align, name: this.findAlignNameById(data.align) });
+        }
+        else if (this.clickedJustify() === 'space-around') {
+            this.clickedAlign.set(data.align);
+            this.selectedAlign.set({ id: data.align, name: this.findAlignNameById(data.align) });
+        }
+        else {
+            this.clickedAlign.set(data.align);
+            this.clickedJustify.set(data.justify);
+            this.selectedJustify.set({ id: data.justify, name: this.findJustifyNameById(data.justify) });
+            this.selectedAlign.set({ id: data.align, name: this.findAlignNameById(data.align) });
+        }
+    }
+    onHover(data) {
+        if (this.clickedAlign() === 'stretch') {
+            this.hoveredAlign.set('stretch');
+            this.hoveredJustify.set(data.justify);
+        }
+        else if (this.clickedAlign() === 'baseline' && data.align === 'flex-start') {
+            this.hoveredAlign.set('baseline');
+            this.hoveredJustify.set(data.justify);
+        }
+        else if (this.clickedJustify() === 'space-between') {
+            this.hoveredAlign.set(data.align);
+            this.hoveredJustify.set('space-between');
+        }
+        else if (this.clickedJustify() === 'space-around') {
+            this.hoveredAlign.set(data.align);
+            this.hoveredJustify.set('space-around');
+        }
+        else {
+            this.hoveredAlign.set(data.align);
+            this.hoveredJustify.set(data.justify);
+        }
+    }
+    onHoverLeave() {
+        this.hoveredAlign.set(null);
+        this.hoveredJustify.set(null);
+    }
+    onJustifyChange(event) {
+        if (event.isUserInteraction) {
+            this.selectedJustify.set({ id: event.value, name: this.findAlignNameById(event.value) });
+            this.clickedJustify.set(event.value);
+        }
+    }
+    onAlignChange(event) {
+        if (event.isUserInteraction) {
+            this.selectedAlign.set({ id: event.value, name: this.findAlignNameById(event.value) });
+            this.clickedAlign.set(event.value);
         }
     }
-    setSameValue(value) {
-        return { top: value, right: value, bottom: value, left: value };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-black ax-bg-opacity-20 ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of flexSides; track side.id){\n        <div\n          [attr.aria-label]=\"side.name\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if ( (side.align === clickedAlign() && side.justify === clickedJustify()) || (side.align === hoveredAlign()\n          && side.justify === hoveredJustify()) || (side.justify === clickedJustify() && clickedAlign() === 'stretch' )\n          || (side.justify ===hoveredJustify() && hoveredAlign() === 'stretch' ) || ((side.align==='flex-start') &&\n          clickedAlign() ==='baseline' && side.justify === clickedJustify()) || ((side.align==='flex-start') &&\n          hoveredAlign() ==='baseline' && side.justify === hoveredJustify()) || ((clickedJustify()==='space-between') &&\n          (side.align === clickedAlign()) ) || ((hoveredJustify()==='space-between') && (side.align === hoveredAlign()))\n          || ((hoveredJustify()==='space-around') && (side.align === hoveredAlign())) ||\n          ((clickedJustify()==='space-around') && (side.align === clickedAlign()) ) ) { } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none\"\n        [style.flex-direction]=\"flexDirection()\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-flex-none\">\n            @if(hoveredJustify()==='space-between'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredJustify()==='space-around'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }@else if (hoveredAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none\"\n        [style.flex-direction]=\"flexDirection()\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-flex-none\">\n            @if(clickedJustify()==='space-between'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='space-around'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if (clickedAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-1\">\n      <span>X</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"name\"\n          valueField=\"id\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"name\"\n          valueField=\"id\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='single') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\n      [ngModel]=\"gap().both\"\n      (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      [changeOnScroll]=\"true\"\n      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\n    } @else {\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().y\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    </div>\n    }\n    <button (click)=\"setFlexMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='single'){\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n          fill=\"currentColor\"\n        ></path>\n        }@else {\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n          fill=\"currentColor\"\n        ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:3.31rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$6.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$5.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXButtonGroupModule,
+                        AXDecoratorModule,
+                        AXSelectBoxModule,
+                        AXRangeSliderModule,
+                        AXNumberBoxModule,
+                        FormsModule,
+                    ], template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-black ax-bg-opacity-20 ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of flexSides; track side.id){\n        <div\n          [attr.aria-label]=\"side.name\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if ( (side.align === clickedAlign() && side.justify === clickedJustify()) || (side.align === hoveredAlign()\n          && side.justify === hoveredJustify()) || (side.justify === clickedJustify() && clickedAlign() === 'stretch' )\n          || (side.justify ===hoveredJustify() && hoveredAlign() === 'stretch' ) || ((side.align==='flex-start') &&\n          clickedAlign() ==='baseline' && side.justify === clickedJustify()) || ((side.align==='flex-start') &&\n          hoveredAlign() ==='baseline' && side.justify === hoveredJustify()) || ((clickedJustify()==='space-between') &&\n          (side.align === clickedAlign()) ) || ((hoveredJustify()==='space-between') && (side.align === hoveredAlign()))\n          || ((hoveredJustify()==='space-around') && (side.align === hoveredAlign())) ||\n          ((clickedJustify()==='space-around') && (side.align === clickedAlign()) ) ) { } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none\"\n        [style.flex-direction]=\"flexDirection()\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-flex-none\">\n            @if(hoveredJustify()==='space-between'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredJustify()==='space-around'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }@else if (hoveredAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none\"\n        [style.flex-direction]=\"flexDirection()\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-flex-none\">\n            @if(clickedJustify()==='space-between'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='space-around'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if (clickedAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-1\">\n      <span>X</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"name\"\n          valueField=\"id\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"name\"\n          valueField=\"id\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='single') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"neutral\"\n      [ngModel]=\"gap().both\"\n      (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      [changeOnScroll]=\"true\"\n      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\n    } @else {\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().y\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    </div>\n    }\n    <button (click)=\"setFlexMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='single'){\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n          fill=\"currentColor\"\n        ></path>\n        }@else {\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n          fill=\"currentColor\"\n        ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:3.31rem}\n"] }]
+        }] });
+
+var flexOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPFlexOptionsWidgetEditComponent: AXPFlexOptionsWidgetEditComponent
+});
+
+const AXPFlexOptionsWidget = {
+    name: 'flex-options',
+    title: 'Flex Options',
+    description: 'Make an Elements Flex',
+    group: AXP_WIDGETS_EDITOR_GROUP,
+    icon: 'fa-solid fa-ellipsis-h',
+    type: 'editor',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return flexOptionsWidgetEditor_component; }).then((c) => c.AXPFlexOptionsWidgetEditComponent),
+        },
+    },
+    visible: false,
+};
+
+class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.ngZone = inject(NgZone);
+        this.rendered = signal(false);
+        this.calculatedValues = signal(AXP_default_Spacing_Box_Value);
+        this.originalValues = signal(AXP_default_Spacing_Box_Value);
+        this.units = signal(AXP_default_Spacing_Box_Units);
+        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);
+        this.afterRender = afterNextRender(() => {
+            if (this.getValue()) {
+                this.calculatedValues.set(AXPPropertyEditorHelper.parseSpacingBox(this.getValue()));
+                this.originalValues.set(AXPPropertyEditorHelper.parseSpacingBox(this.getValue()));
+            }
+            this.rendered.set(true);
+        });
+    }
+    setSpacing(input, type, side) {
+        if (!this.rendered()) {
+            return;
+        }
+        const value = input instanceof Event ? Number.parseInt(input.target.value) : input;
+        const currentValue = this.calculatedValues();
+        this.calculatedValues.set({
+            ...currentValue,
+            [type]: {
+                ...currentValue[type],
+                [side]: value,
+            },
+        });
+        const data = AXPPropertyEditorHelper.parseSpacingBoxReverse(this.calculatedValues(), this.units());
+        this.setValue(data);
     }
     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().placement = side === 'right' ? ['bottom-end', 'end'] : ['bottom', 'top'];
         this.popover().open();
     }
     listenToMove(event, type, side) {
@@ -7882,43 +8833,35 @@ class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
             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
+            targetElement.style.cursor = 's-resize';
             const onMouseDown = (e) => {
-                const { clientY } = this.getClientCoordinates(e); // Only use clientY for vertical movement
+                const { clientY } = this.getClientCoordinates(e);
                 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;
+                const { clientY } = this.getClientCoordinates(e);
+                const delta = (clientY - startY) * -1;
+                const oldValue = this.calculatedValues()[type][side];
+                currentValue = delta + AXPPropertyEditorHelper.getValueWithUnit(oldValue).value;
                 this.ngZone.run(() => {
-                    this.setSpacing(Math.max(currentValue, 0), type, side); // Update spacing, ensuring it is non-negative
+                    this.setSpacing(Math.max(currentValue, 0), type, side);
                 });
-                // 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
+                targetElement.style.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 };
@@ -7927,11 +8870,11 @@ class AXPSpacingWidgetEditComponent extends AXPWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"axp-spacing-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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <div style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\">\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--color-ui-input-background);\n                  border-color: var(--color-border-2);\n                  border-radius: 4px;\n                  border-style: solid;\n                  border-width: 1px;\n                  display: flex;\n                  flex: 0 1 auto;\n                  height: 24px;\n                  position: relative;\n                \"\n              >\n                <input\n                  autocomplete=\"off\"\n                  data-wf-text-input=\"true\"\n                  name=\"spacing\"\n                  placeholder=\"\"\n                  aria-label=\"Edit spacing input\"\n                  type=\"text\"\n                  aria-disabled=\"false\"\n                  [value]=\"value\"\n                  (input)=\"setSpacing($event, type, side)\"\n                  style=\"\n                    padding-right: 20px;\n                    background-color: transparent;\n                    border-color: transparent;\n                    border-radius: 4px;\n                    border-style: solid;\n                    border-width: 0px;\n                    box-sizing: border-box;\n                    color: var(--color-text-primary);\n                    cursor: auto;\n                    display: block;\n                    font-family: inherit;\n                    font-size: inherit;\n                    height: 100%;\n                    line-height: 1;\n                    outline: transparent solid 2px;\n                    padding: 0px 4px;\n                    width: 100%;\n                  \"\n                />\n              </div>\n              <div\n                id=\"spacing-UnitSelect\"\n                data-prevent-global-event-handlers=\"true\"\n                tabindex=\"-1\"\n                data-legacy-styled=\"true\"\n                aria-expanded=\"false\"\n                aria-haspopup=\"listbox\"\n                data-focus=\"false\"\n                style=\"\n                  border-color: transparent;\n                  outline: 0px;\n                  cursor: default;\n                  user-select: none;\n                  font-size: 9px;\n                  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n                    Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',\n                    'Segoe UI Symbol', sans-serif;\n                  line-height: 12px;\n                  letter-spacing: -0.115px;\n                  text-transform: none;\n                  color: var(--color-text-primary);\n                  place-self: center stretch;\n                  grid-area: 1 / 2 / 2 / 3;\n                  z-index: 1;\n                  min-width: 16px;\n                  border-radius: 1px;\n                  height: calc(100% - 2px);\n                  text-align: center;\n                  background: transparent;\n                  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;\n                  border-width: 0px;\n                  margin: 1px;\n                  position: relative;\n                  right: 2px;\n                  display: grid;\n                  grid-template-columns: auto;\n                  grid-auto-flow: column;\n                  justify-content: unset;\n                  width: 100%;\n                  flex-grow: unset;\n                  padding: 0px;\n                  box-sizing: border-box;\n                  --component-icon-color: var(--color-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  style=\"\n                    justify-self: start;\n                    width: 100%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                  \"\n                >\n                  PX\n                  <!--PX-->\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for(i of FixedValues; track $index){\n        <div\n          (click)=\"setSpacing(i.value, type, side)\"\n          class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n          [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n          [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n          tabindex=\"0\"\n          style=\"\n            border-bottom-color: var(--color-border-1);\n            border-left-color: var(--color-border-1);\n            border-right-color: var(--color-border-1);\n            border-top-color: var(--color-border-1);\n            outline: 0px;\n            cursor: default;\n            user-select: none;\n            padding: 0px;\n            box-sizing: border-box;\n            font-family: inherit;\n            font-size: inherit;\n            --component-icon-color: var(--color-text-secondary);\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            border-radius: 4px;\n            color: var(--color-action-secondary-text);\n            background: var(--color-action-secondary-background);\n            border-width: 0px;\n            border-style: solid;\n            box-shadow: var(--box-shadows-action-secondary);\n            align-self: center;\n          \"\n        >\n          <div class=\"ax-truncate\">\n            {{ i.label }}\n            <span class=\"ax-text-xs ax-text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side]\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;line-height:11px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$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$3.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, 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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXNumberBoxModule, FormsModule, AXCheckBoxModule, AXPopoverModule, CommonModule, AXRangeSliderModule], inputs: [], template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <div style=\"display: grid; grid-template-columns: 1fr auto; transform: translate3d(0px, 0px, 0px)\">\n              <div\n                data-legacy-styled=\"true\"\n                style=\"\n                  grid-area: 1 / 1 / 2 / -1;\n                  align-items: stretch;\n                  background-color: var(--color-ui-input-background);\n                  border-color: var(--color-border-2);\n                  border-radius: 4px;\n                  border-style: solid;\n                  border-width: 1px;\n                  display: flex;\n                  flex: 0 1 auto;\n                  height: 24px;\n                  position: relative;\n                \"\n              >\n                <input\n                  autocomplete=\"off\"\n                  data-wf-text-input=\"true\"\n                  name=\"spacing\"\n                  placeholder=\"\"\n                  aria-label=\"Edit spacing input\"\n                  type=\"text\"\n                  aria-disabled=\"false\"\n                  [value]=\"value\"\n                  (input)=\"setSpacing($event, type, side)\"\n                  style=\"\n                    padding-right: 20px;\n                    background-color: transparent;\n                    border-color: transparent;\n                    border-radius: 4px;\n                    border-style: solid;\n                    border-width: 0px;\n                    box-sizing: border-box;\n                    color: var(--color-text-primary);\n                    cursor: auto;\n                    display: block;\n                    font-family: inherit;\n                    font-size: inherit;\n                    height: 100%;\n                    line-height: 1;\n                    outline: transparent solid 2px;\n                    padding: 0px 4px;\n                    width: 100%;\n                  \"\n                />\n              </div>\n              <div\n                id=\"spacing-UnitSelect\"\n                data-prevent-global-event-handlers=\"true\"\n                tabindex=\"-1\"\n                data-legacy-styled=\"true\"\n                aria-expanded=\"false\"\n                aria-haspopup=\"listbox\"\n                data-focus=\"false\"\n                style=\"\n                  border-color: transparent;\n                  outline: 0px;\n                  cursor: default;\n                  user-select: none;\n                  font-size: 9px;\n                  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n                    Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',\n                    'Segoe UI Symbol', sans-serif;\n                  line-height: 12px;\n                  letter-spacing: -0.115px;\n                  text-transform: none;\n                  color: var(--color-text-primary);\n                  place-self: center stretch;\n                  grid-area: 1 / 2 / 2 / 3;\n                  z-index: 1;\n                  min-width: 16px;\n                  border-radius: 1px;\n                  height: calc(100% - 2px);\n                  text-align: center;\n                  background: transparent;\n                  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;\n                  border-width: 0px;\n                  margin: 1px;\n                  position: relative;\n                  right: 2px;\n                  display: grid;\n                  grid-template-columns: auto;\n                  grid-auto-flow: column;\n                  justify-content: unset;\n                  width: 100%;\n                  flex-grow: unset;\n                  padding: 0px;\n                  box-sizing: border-box;\n                  --component-icon-color: var(--color-text-secondary);\n                  align-items: center;\n                  border-style: solid;\n                \"\n              >\n                <div\n                  data-legacy-styled=\"true\"\n                  style=\"\n                    justify-self: start;\n                    width: 100%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                  \"\n                >\n                  PX\n                  <!--PX-->\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for(i of FixedValues; track $index){\n        <div\n          (click)=\"setSpacing(i.value, type, side)\"\n          class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n          [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n          [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n          tabindex=\"0\"\n          style=\"\n            border-bottom-color: var(--color-border-1);\n            border-left-color: var(--color-border-1);\n            border-right-color: var(--color-border-1);\n            border-top-color: var(--color-border-1);\n            outline: 0px;\n            cursor: default;\n            user-select: none;\n            padding: 0px;\n            box-sizing: border-box;\n            font-family: inherit;\n            font-size: inherit;\n            --component-icon-color: var(--color-text-secondary);\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            border-radius: 4px;\n            color: var(--color-action-secondary-text);\n            background: var(--color-action-secondary-background);\n            border-width: 0px;\n            border-style: solid;\n            box-shadow: var(--box-shadows-action-secondary);\n            align-self: center;\n          \"\n        >\n          <div class=\"ax-truncate\">\n            {{ i.label }}\n            <span class=\"ax-text-xs ax-text-neutral-400\"> {{ units()[this.current().type][this.current().side] }}</span>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side]\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;line-height:11px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
         }] });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -7955,84 +8898,6 @@ const AXPSpacingWidget = {
     visible: false,
 };
 
-class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.isRadiusLinked = signal(false);
-    }
-    setRadiusLinked() {
-        this.isRadiusLinked.set(!this.isRadiusLinked());
-    }
-    setBorder(e, type, side) {
-        const value = e.value ?? 0;
-        const currentValue = this.getValue();
-        if (type === 'radius' && this.isRadiusLinked()) {
-            this.setValue({
-                ...this.getValue(),
-                [type]: this.setSameValue(value, type),
-            });
-        }
-        else {
-            this.setValue({
-                ...currentValue,
-                [type]: {
-                    ...currentValue[type],
-                    [side]: value,
-                },
-            });
-        }
-    }
-    setSameValue(value, type) {
-        if (type === 'radius') {
-            return {
-                'top-right': value,
-                'top-left': value,
-                'bottom-right': value,
-                'bottom-left': value,
-            };
-        }
-        else {
-            return { top: value, right: value, bottom: value, left: value };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-border-container-box\">\n  <div class=\"ax-border-radius-side\">\n    <div class=\"ax-border-radius-text\">Radius</div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-top-start\">\n      <i class=\"fa-regular fa-border-top-left\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-left')\"\n        [ngModel]=\"this.getValue().radius['top-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-top-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-right')\"\n        [ngModel]=\"this.getValue().radius['top-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-top-left ax-rotate-90\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-start\">\n      <i class=\"fa-regular fa-border-bottom-right ax-rotate-90\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-left')\"\n        [ngModel]=\"this.getValue().radius['bottom-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-bottom-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-right')\"\n        [ngModel]=\"this.getValue().radius['bottom-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-bottom-right\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-center ax-text-xs\">\n      <ax-button color=\"ghost\" [toggleable]=\"true\" (onClick)=\"setRadiusLinked()\"\n        ><ax-icon><i class=\"fa-regular fa-link\"></i></ax-icon\n      ></ax-button>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-py-2\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider class=\"ax-min-w-28\"></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Center -->\n      <div class=\"ax-border-box-center ax-col-start-2 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item [selected]=\"true\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n\n      <div class=\"ax-text-sm ax-font-light\">Width</div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n\n      <div class=\"ax-text-sm ax-font-light\">Color</div>\n      <ax-color-box ngModel=\"#3b82f6\"></ax-color-box>\n    </div>\n  </div>\n</div>\n", styles: [".ax-radius-box{--ax-range-slider-base-thickness: .15rem}.ax-radius-box ax-range-slider{padding:.5rem}.ax-radius-box ax-number-box>div>input{padding:0 .2rem!important}.ax-border-box ax-button-group ax-button-group-item{padding:.2rem .55rem}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$4.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i4$3.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange"] }, { kind: "component", type: i5$3.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        AXNumberBoxModule,
-                        FormsModule,
-                        AXCheckBoxModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXRangeSliderModule,
-                        AXButtonGroupModule,
-                        AXColorBoxModule,
-                    ], template: "<!-- <div class=\"ax-border-container-box\">\n  <div class=\"ax-border-radius-side\">\n    <div class=\"ax-border-radius-text\">Radius</div>\n  </div>\n  <div class=\"ax-border-radius-box\">\n    <div class=\"ax-border-radius-top-start\">\n      <i class=\"fa-regular fa-border-top-left\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-left')\"\n        [ngModel]=\"this.getValue().radius['top-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-top-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'top-right')\"\n        [ngModel]=\"this.getValue().radius['top-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-top-left ax-rotate-90\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-start\">\n      <i class=\"fa-regular fa-border-bottom-right ax-rotate-90\"></i>\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-left')\"\n        [ngModel]=\"this.getValue().radius['bottom-left']\"\n      ></ax-number-box>\n    </div>\n    <div class=\"ax-border-radius-bottom-end\">\n      <ax-number-box\n        class=\"ax-xs\"\n        [minValue]=\"0\"\n        [showSpinButtons]=\"false\"\n        [changeOnScroll]=\"true\"\n        (onValueChanged)=\"setBorder($event, 'radius', 'bottom-right')\"\n        [ngModel]=\"this.getValue().radius['bottom-right']\"\n      ></ax-number-box>\n      <i class=\"fa-regular fa-border-bottom-right\"></i>\n    </div>\n    <div class=\"ax-border-radius-bottom-center ax-text-xs\">\n      <ax-button color=\"ghost\" [toggleable]=\"true\" (onClick)=\"setRadiusLinked()\"\n        ><ax-icon><i class=\"fa-regular fa-link\"></i></ax-icon\n      ></ax-button>\n    </div>\n  </div>\n</div> -->\n<div class=\"ax-py-2\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider class=\"ax-min-w-28\"></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Center -->\n      <div class=\"ax-border-box-center ax-col-start-2 ax-row-start-2\">\n        <div class=\"ax-p-1\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item [selected]=\"true\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n\n      <div class=\"ax-text-sm ax-font-light\">Width</div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box class=\"ax-xs ax-min-w-8\" [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-pl-0 !ax-pr-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n\n      <div class=\"ax-text-sm ax-font-light\">Color</div>\n      <ax-color-box ngModel=\"#3b82f6\"></ax-color-box>\n    </div>\n  </div>\n</div>\n", styles: [".ax-radius-box{--ax-range-slider-base-thickness: .15rem}.ax-radius-box ax-range-slider{padding:.5rem}.ax-radius-box ax-number-box>div>input{padding:0 .2rem!important}.ax-border-box ax-button-group ax-button-group-item{padding:.2rem .55rem}\n"] }]
-        }] });
-
-var borderWidgetEditor_component = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  AXPBorderWidgetEditComponent: AXPBorderWidgetEditComponent
-});
-
-const AXPBorderWidget = {
-    name: 'border',
-    title: 'Box Border',
-    description: 'Editing Elements Border',
-    group: AXP_WIDGETS_EDITOR_GROUP,
-    icon: 'fa-solid fa-border',
-    type: 'editor',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return borderWidgetEditor_component; }).then((c) => c.AXPBorderWidgetEditComponent),
-        },
-    },
-    visible: false,
-};
-
 class AXPCronJobWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -8363,7 +9228,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$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$5.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,
@@ -8485,7 +9350,7 @@ const AXPColorBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-B2g0ct24.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-CWhbgmDV.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetView_component; }).then((c) => c.AXPColorBoxWidgetViewComponent),
@@ -8505,6 +9370,108 @@ const AXPColorBoxWidget = {
     },
 };
 
+class AXPFilterOperationsComponent {
+    constructor() {
+        this.selectedOperation = model.required();
+        this.type = input('string');
+        this.operations = computed(() => this.getOperations());
+    }
+    getOperations() {
+        switch (this.type()) {
+            case 'string':
+                return STRING_OPERATORS;
+            case 'number':
+                return NUMBER_OPERATORS;
+            case 'boolean':
+                return BOOLEAN_OPERATORS;
+            case 'datetime':
+                return DATE_OPERATORS;
+            default:
+                return ALL_DEFAULT_OPERATORS;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-surface ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$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: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$2.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-filter-operations', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, AXDecoratorModule, AXPopoverModule, AXButtonModule, AXSelectionListModule], template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-surface ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n" }]
+        }] });
+
+class AXPStringWidgetFilterComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.operation = computed(() => this.getValue()?.operation || 'equal');
+        this.value = computed(() => this.getValue()?.value);
+    }
+    handleValueChange(e) {
+        if (e.isUserInteraction) {
+            this.setValue({
+                value: e.value,
+                operation: this.operation(),
+            });
+        }
+    }
+    handleOperationChanged(e) {
+        this.setValue({
+            value: this.value(),
+            operation: e,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStringWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPStringWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-items-center">
+      <ax-text-box class="ax-flex-1" [ngModel]="value()" (onValueChanged)="handleValueChange($event)">
+        <ax-clear-button></ax-clear-button>
+      </ax-text-box>
+      <axp-filter-operations
+        [type]="'string'"
+        [selectedOperation]="operation()"
+        (selectedOperationChange)="handleOperationChanged($event)"
+      ></axp-filter-operations>
+    </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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStringWidgetFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-flex ax-items-center">
+      <ax-text-box class="ax-flex-1" [ngModel]="value()" (onValueChanged)="handleValueChange($event)">
+        <ax-clear-button></ax-clear-button>
+      </ax-text-box>
+      <axp-filter-operations
+        [type]="'string'"
+        [selectedOperation]="operation()"
+        (selectedOperationChange)="handleOperationChanged($event)"
+      ></axp-filter-operations>
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXTextBoxModule, FormsModule, AXFormModule, AXDecoratorModule, AXPFilterOperationsComponent],
+                }]
+        }] });
+
+var stringFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPStringWidgetFilterComponent: AXPStringWidgetFilterComponent
+});
+
+const AXPStringFilterWidget = {
+    name: 'string-filter',
+    title: 'String Filter',
+    icon: 'fa-solid fa-square',
+    group: AXP_WIDGETS_FILTER_GROUP,
+    type: 'filter',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return stringFilterWidgetEdit_component; }).then((c) => c.AXPStringWidgetFilterComponent),
+        },
+    },
+};
+
 const AXPDocumentWidget = {
     name: 'document-layout',
     title: 'Document',
@@ -8536,7 +9503,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: 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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: 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,
@@ -8590,7 +9557,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$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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: 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,
@@ -9327,11 +10294,15 @@ class AXPWidgetsModule {
                     AXPGalleryWidget,
                     AXPToggleWidget,
                     AXPColorBoxWidget,
+                    AXPAvatarWidget,
                     //
                     AXPButtonWidget,
                     //
                     AXPSpacingWidget,
                     AXPBorderWidget,
+                    //
+                    AXPStringFilterWidget,
+                    AXPFlexOptionsWidget,
                 ],
             })] }); }
 }
@@ -9370,11 +10341,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPGalleryWidget,
                                 AXPToggleWidget,
                                 AXPColorBoxWidget,
+                                AXPAvatarWidget,
                                 //
                                 AXPButtonWidget,
                                 //
                                 AXPSpacingWidget,
                                 AXPBorderWidget,
+                                //
+                                AXPStringFilterWidget,
+                                AXPFlexOptionsWidget,
                             ],
                         }),
                     ],
@@ -9387,5 +10362,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, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetFilterComponent, AXPRichTextWidgetPrintComponent, AXPRichTextWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetFilterComponent, AXPSelectBoxWidgetPrintComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetFilterComponent, AXPSelectionListWidgetPrintComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetFilterComponent, AXPSignatureWidgetPrintComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Align, AXP_Flex_Justify, AXP_Flex_Sides, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY, AXP_VALUE_FIELD_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map