@acorex/platform 19.2.10 → 19.2.12

package/fesm2022/acorex-platform-widgets.mjs

@@ -7,7 +7,7 @@ import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/loading';
+import * as i2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -17,12 +17,12 @@ 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 i2$1 from '@acorex/components/label';
+import * as i2$2 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 i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { AXPClipBoardService, AXPFileStorageService, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
+import { AXPClipBoardService, AXPFileStorageService, AXPDataGenerator, 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';
@@ -34,7 +34,7 @@ import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDateTimeFormatter, AXCalendarService } from '@acorex/core/date-time';
 import * as i3$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
-import * as i4$1 from '@acorex/components/text-area';
+import * as i4 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormatService } from '@acorex/core/format';
 import { isNumber, cloneDeep, sum, get } from 'lodash-es';
@@ -46,20 +46,20 @@ import { AXPlatform } from '@acorex/core/platform';
 import { AXPHtmlUtils } from '@acorex/platform/core';
 import * as i3$5 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import * as i2$2 from '@acorex/components/wysiwyg';
+import * as i2$3 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 import * as i5$2 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i2$3 from '@acorex/components/selection-list';
+import * as i2$4 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { first, Subscription } from 'rxjs';
-import * as i2$4 from '@acorex/components/switch';
+import * as i2$5 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { AXFileService } from '@acorex/core/file';
-import * as i5$3 from '@acorex/components/uploader';
+import * as i2$6 from '@acorex/components/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import * as i2$5 from '@acorex/components/image';
+import * as i2$7 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import * as i1$4 from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
@@ -72,7 +72,7 @@ import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i7$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
-import * as i2$6 from '@acorex/components/color-box';
+import * as i2$8 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
 import * as i1$8 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
@@ -1122,7 +1122,7 @@ class AXPButtonWidgetViewComponent extends AXPWidgetComponent {
       <ax-loading> </ax-loading>
       }
     </ax-button>
-  `, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }], 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPButtonWidgetViewComponent, decorators: [{
             type: Component,
@@ -1169,7 +1169,7 @@ const AXPButtonWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-button-widget-designer.component-2iWPztWW.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-button-widget-designer.component-BWhqDxGH.mjs').then((c) => c.AXPButtonWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return buttonWidgetView_component; }).then((c) => c.AXPButtonWidgetViewComponent),
@@ -1205,7 +1205,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: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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,
@@ -1360,7 +1360,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: i5$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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: i5$1.AXTranslatorPipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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,
@@ -1599,7 +1599,7 @@ class AXPContactWidgetEditComponent extends AXPWidgetComponent {
       </ax-prefix>
     </ax-button>
     }
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "selectedItems", "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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -2030,7 +2030,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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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,
@@ -2491,7 +2491,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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], 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,
@@ -2794,7 +2794,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$1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], 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,
@@ -3304,7 +3304,7 @@ class AXPLinkWidgetEditComponent extends AXPWidgetComponent {
     >
     </ax-select-box>
     } }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "selectedItems", "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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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,
@@ -3636,7 +3636,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetComponent {
       </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3923,7 +3923,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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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,
@@ -4320,7 +4320,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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", "selectedItems", "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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], 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,
@@ -4619,6 +4619,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRichTextWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPRichTextWidgetEditComponent, isStandalone: true, selector: "axp-rich-text-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `<ax-wysiwyg-container
     [placeHolder]="placeholder()"
+    [disabled]="disabled()"
     [look]="'solid'"
     [ngModel]="getValue()"
     (onValueChanged)="setWysiwyg($event)"
@@ -4628,19 +4629,8 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       [style.max-height]="getLinePx(maxLineCount())"
       [style.height]="'fit-content !important'"
     ></ax-wysiwyg-view>
-    <!-- <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-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-insert></ax-wysiwyg-insert>
         <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
@@ -4656,7 +4646,7 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
       [options]="validation.options"
     ></ax-validation-rule>
     }
-  </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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$2.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$2.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i2$2.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$2.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$2.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$2.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$2.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$2.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: 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "component", type: i2$3.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$3.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$3.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$3.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$3.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$3.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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,
@@ -4664,6 +4654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'axp-rich-text-widget',
                     template: `<ax-wysiwyg-container
     [placeHolder]="placeholder()"
+    [disabled]="disabled()"
     [look]="'solid'"
     [ngModel]="getValue()"
     (onValueChanged)="setWysiwyg($event)"
@@ -4673,19 +4664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [style.max-height]="getLinePx(maxLineCount())"
       [style.height]="'fit-content !important'"
     ></ax-wysiwyg-view>
-    <!-- <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-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-insert></ax-wysiwyg-insert>
         <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
@@ -4816,7 +4796,6 @@ const AXPRichTextWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
-        //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
         AXP_REQUIRED_VALIDATION_PROPERTY,
         AXP_MIN_LENGTH_VALIDATION_PROPERTY,
         AXP_MAX_LENGTH_VALIDATION_PROPERTY,
@@ -4981,7 +4960,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", "selectedItems", "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$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], 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$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], 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,
@@ -5271,7 +5250,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$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -5355,7 +5334,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$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$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,
@@ -5653,7 +5632,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-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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-subtitle, 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5723,11 +5702,11 @@ var textBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPTextBoxWidgetEditComponent: AXPTextBoxWidgetEditComponent
 });
 
-let AXPTextBoxWidgetFilterComponent$1 = class AXPTextBoxWidgetFilterComponent extends AXPWidgetComponent {
+class AXPTextBoxWidgetFilterComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTextBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetFilterComponent$1, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetFilterComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -5739,7 +5718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 var textBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPTextBoxWidgetFilterComponent: AXPTextBoxWidgetFilterComponent$1
+    AXPTextBoxWidgetFilterComponent: AXPTextBoxWidgetFilterComponent
 });
 
 class AXPTextBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
@@ -5905,7 +5884,7 @@ class AXPToggleWidgetEditComponent extends AXPWidgetComponent {
         <ax-label  [textContent]="label()"></ax-label>
       }
   </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$4.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$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$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: i2$2.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,
@@ -6475,7 +6454,7 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
       </div>
     </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$3.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$3.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i2$6.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i2$6.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6558,24 +6537,21 @@ var fileBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
     AXPFileBoxWidgetPrintComponent: AXPFileBoxWidgetPrintComponent
 });
 
-class AXPFileManagementService {
-}
-
 class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.fileService = inject(AXPFileManagementService);
+        this.fileStorageService = inject(AXPFileStorageService);
         this.loadingDialog = inject(AXLoadingDialogService);
         this.translateService = inject(AXTranslationService);
         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.internalValue = signal([]);
         this.downloadSubscription = new Subscription();
     }
+    ngOnInit() {
+        this.updateInternalValue();
+        super.ngOnInit();
+    }
     async handleDownload(item) {
         const d = this.loadingDialog.show({
             title: await this.translateService.translateAsync('downloader.dialog.downloading'), // Downloading File
@@ -6594,23 +6570,6 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
                 },
             ],
         });
-        this.downloadSubscription = this.fileService.get(item.value, item.name || 'download').subscribe((event) => {
-            d.setProgressText(event.status);
-            d.setProgressStatus(`${event.progress}%`);
-            d.setProgressValue(event.progress);
-            if (event.progress === 100) {
-                this.triggerDownload(event.data, item.name);
-                setTimeout(() => {
-                    d.close();
-                }, 1000);
-            }
-        }, async (error) => {
-            d.setProgressText(error.statusText);
-            d.setProgressStatus(await this.translateService.translateSync('downloader.dialog.downloadFailed')); //Downloading Failed
-            setTimeout(() => {
-                d.close();
-            }, 1000);
-        });
     }
     cancelDownload() {
         this.downloadSubscription.unsubscribe();
@@ -6625,8 +6584,7 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
-    getFileInfo(fileName) {
-        const extension = fileName.split('.').pop()?.toLowerCase();
+    getFileInfo(extension) {
         switch (extension) {
             case 'txt':
                 return { icon: 'fa-file-alt', color: 'ax-bg-blue-100 ax-text-blue-500' };
@@ -6670,28 +6628,33 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
                 return { icon: 'fa-file', color: 'ax-bg-gray-100 ax-text-gray-500' };
         }
     }
-    extractItem(item) {
-        return typeof item == 'object'
-            ? {
-                name: item.name,
-                type: item.type ?? 'Unknown',
-                value: item.value,
-                size: item.size || '-',
+    async updateInternalValue() {
+        if (!this.getValue()) {
+            this.internalValue.set([]);
+        }
+        else {
+            if (Array.isArray(this.getValue())) {
+                this.internalValue.set(await Promise.all(this.getValue().map(async (item) => await this.fileStorageService.getInfo(item))));
             }
-            : {
-                name: item || '',
-                type: 'Unknown',
-                value: item || '',
-                size: '-',
-            };
+            else {
+                this.internalValue.set([await this.fileStorageService.getInfo(this.getValue())]);
+            }
+        }
+        console.log(this.internalValue());
+        console.log(this.getValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFileBoxWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-2">
-      @if(multiple()){ @for(item of internalValue();let first=$first;track item.name) {
+      @if (multiple()) { @for (item of internalValue(); track item.fileId) {
       <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
-      } }@else {
-      <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: internalValue()[0] }" ]></ng-template>
+      } } @else {
+      <ng-template
+        [ngTemplateOutlet]="itemTemplate"
+        ]
+        [ngTemplateOutletContext]="{ data: internalValue()[0] }"
+        ]
+      ></ng-template>
       }
       <ng-template #itemTemplate let-item="data">
         <div
@@ -6699,18 +6662,25 @@ class AXPFileBoxWidgetViewComponent extends AXPWidgetComponent {
           class="ax-flex ax-items-center ax-justify-between ax-p-2 ax-border ax-rounded-lg ax-bg-surface ax-col-start-1 ax-col-end-13"
         >
           <div class="ax-flex ax-items-center ax-gap-3">
-            <ng-container *ngIf="getFileInfo(item.name) as fileInfo">
-              <div class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center" [ngClass]="[fileInfo.color]">
+            <ng-container *ngIf="getFileInfo(item.mimeType) as fileInfo">
+              <div
+                class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center"
+                [ngClass]="[fileInfo.color]"
+              >
                 <i [ngClass]="['fa-solid', 'ax-text-xl', fileInfo.icon]"></i>
               </div>
             </ng-container>
             <div>
-              <div class="ax-leading-6">{{ item.name }}</div>
+              <div class="ax-leading-6">{{ item.fileId }}</div>
               <p class="ax-text-sm ax-text-neutral-400">{{ item.size }}</p>
             </div>
           </div>
-          @if(downloadable()){
-          <ax-button (onClick)="handleDownload(item)" look="blank" color="ghost" class="!ax-text-neutral-400 hover:!ax-text-neutral-600">
+          @if (downloadable()) {
+          <ax-button
+            (onClick)="handleDownload(item)"
+            look="blank"
+            class="!ax-text-neutral-400 hover:!ax-text-neutral-600"
+          >
             <ax-icon>
               <i class="fa-solid fa-download"></i>
             </ax-icon>
@@ -6726,10 +6696,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-2">
-      @if(multiple()){ @for(item of internalValue();let first=$first;track item.name) {
+      @if (multiple()) { @for (item of internalValue(); track item.fileId) {
       <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
-      } }@else {
-      <ng-template [ngTemplateOutlet]="itemTemplate" ] [ngTemplateOutletContext]="{ data: internalValue()[0] }" ]></ng-template>
+      } } @else {
+      <ng-template
+        [ngTemplateOutlet]="itemTemplate"
+        ]
+        [ngTemplateOutletContext]="{ data: internalValue()[0] }"
+        ]
+      ></ng-template>
       }
       <ng-template #itemTemplate let-item="data">
         <div
@@ -6737,18 +6712,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           class="ax-flex ax-items-center ax-justify-between ax-p-2 ax-border ax-rounded-lg ax-bg-surface ax-col-start-1 ax-col-end-13"
         >
           <div class="ax-flex ax-items-center ax-gap-3">
-            <ng-container *ngIf="getFileInfo(item.name) as fileInfo">
-              <div class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center" [ngClass]="[fileInfo.color]">
+            <ng-container *ngIf="getFileInfo(item.mimeType) as fileInfo">
+              <div
+                class="ax-w-10 ax-h-10 ax-rounded-lg ax-flex ax-items-center ax-justify-center"
+                [ngClass]="[fileInfo.color]"
+              >
                 <i [ngClass]="['fa-solid', 'ax-text-xl', fileInfo.icon]"></i>
               </div>
             </ng-container>
             <div>
-              <div class="ax-leading-6">{{ item.name }}</div>
+              <div class="ax-leading-6">{{ item.fileId }}</div>
               <p class="ax-text-sm ax-text-neutral-400">{{ item.size }}</p>
             </div>
           </div>
-          @if(downloadable()){
-          <ax-button (onClick)="handleDownload(item)" look="blank" color="ghost" class="!ax-text-neutral-400 hover:!ax-text-neutral-600">
+          @if (downloadable()) {
+          <ax-button
+            (onClick)="handleDownload(item)"
+            look="blank"
+            class="!ax-text-neutral-400 hover:!ax-text-neutral-600"
+          >
             <ax-icon>
               <i class="fa-solid fa-download"></i>
             </ax-icon>
@@ -6760,7 +6742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXButtonModule, AXDecoratorModule],
-                    inputs: []
+                    inputs: [],
                 }]
         }] });
 
@@ -6819,6 +6801,9 @@ const AXPFileBoxWidget = {
     },
 };
 
+class AXPFileManagementService {
+}
+
 class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -6907,7 +6892,7 @@ class AXPGalleryWidgetViewComponent extends AXPWidgetComponent {
       <small>No Media!</small>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.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-subtitle, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2.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,
@@ -6972,216 +6957,6 @@ var galleryWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPGalleryWidgetViewComponent: AXPGalleryWidgetViewComponent
 });
 
-class AXPGalleryWidgetEditComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.internalValue = computed(() => {
-            const parsedValue = this.getValue() ? JSON.parse(this.getValue()) : [];
-            return Array.isArray(parsedValue) ? parsedValue.map((c) => c) : [parsedValue];
-        });
-        this.activeMedia = signal(null);
-        this.thumbnails = computed(() => this.internalValue().filter((i) => i.id !== this.activeMedia()?.id));
-        this.multiple = computed(() => this.options()['multiple']);
-    }
-    changeMediaSelected(media) {
-        this.activeMedia.set(media);
-    }
-    ngAfterViewInit() {
-        this.activeMedia.set(this.internalValue()[0]);
-    }
-    getMediaInfo(mediaName) {
-        const extension = mediaName.split('.').pop()?.toLowerCase();
-        switch (extension) {
-            case 'jpg':
-            case 'jpeg':
-            case 'png':
-            case 'gif':
-            case 'bmp':
-                return { icon: '', format: 'image' };
-            case 'mp4':
-            case 'avi':
-            case 'mkv':
-            case 'mov':
-                return { icon: 'fa-regular fa-play', format: 'video' };
-            case 'mp3':
-            case 'wav':
-            case 'ogg':
-                return { icon: 'fa-regular fa-volume-high', format: 'audio' };
-            default:
-                return { icon: '', format: 'image' };
-        }
-    }
-    get __class() {
-        const cls = {};
-        cls[`ax-block`] = true;
-        cls[`ax-flex-1`] = true;
-        return cls;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPGalleryWidgetEditComponent, 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-2">
-      @if(internalValue().length){
-      <div class="ax-col-start-1 ax-col-end-13 ax-flex ax-items-center lg:ax-justify-start ax-justify-center ">
-        <div class="ax-flex ax-flex-col ax-items-center ax-gap-4 ax-w-full">
-          @switch (getMediaInfo(activeMedia()?.name||'').format) { @case ('video') {
-          <video class="ax-rounded-lg ax-h-48 md:ax-h-72 ax-w-auto ax-shadow-md" controls [src]="activeMedia()?.url"></video>
-          } @case ('image') {
-          <ax-image class="ax-rounded-lg ax-h-48 md:ax-h-72 ax-w-auto" [src]="activeMedia()?.url">
-            <ax-loading></ax-loading>
-            <ax-placeholder>
-              <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
-                <span>Connection Error!</span>
-              </div>
-            </ax-placeholder>
-          </ax-image>
-          } @case ('audio') {
-          <audio controls class="ax-rounded-lg">
-            <source [src]="activeMedia()?.url" type="audio/mp3" />
-          </audio>
-          } }
-          <div class="ax-flex ax-gap-4 ax-overflow-x-auto ax-max-w-[320px] lg:ax-max-w-[480px] ax-pb-2">
-            @for (media of thumbnails(); track $index) {
-            <div
-              *ngIf="getMediaInfo(media.name) as mediaInfo"
-              class="hover:ax-opacity-75 ax-transition-all ax-relative ax-cursor-pointer ax-flex ax-justify-center ax-items-center"
-              (click)="changeMediaSelected(media)"
-            >
-              <ax-image
-                class="ax-w-16 ax-brightness-50 ax-h-16 ax-rounded-lg ax-shadow-md ax-filter"
-                [src]="mediaInfo.format == 'image' ? media.url : media.posterUrl"
-              ></ax-image>
-              <div class="ax-absolute ax-text-neutral-300 ax-text-xl">
-                <ax-icon [class]="mediaInfo.icon"> </ax-icon>
-              </div>
-            </div>
-            }
-            <div axUploaderZone>
-              <div axUploaderBrowseHandle class="ax-flex ax-justify-center ax-items-center ax-w-16 ax-h-16 ax-border ax-rounded-lg ax-cursor-pointer">
-                <ax-icon class="fa-solid fa-plus ax-text-neutral-500"> </ax-icon>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      } @else {
-      <div class=" ax-col-start-1 ax-col-end-13">
-        <ax-uploader-drop-zone></ax-uploader-drop-zone>
-      </div>
-
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.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-subtitle, 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$3.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$3.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "directive", type: i5$3.AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="ax-grid ax-grid-cols-12 ax-gap-2">
-      @if(internalValue().length){
-      <div class="ax-col-start-1 ax-col-end-13 ax-flex ax-items-center lg:ax-justify-start ax-justify-center ">
-        <div class="ax-flex ax-flex-col ax-items-center ax-gap-4 ax-w-full">
-          @switch (getMediaInfo(activeMedia()?.name||'').format) { @case ('video') {
-          <video class="ax-rounded-lg ax-h-48 md:ax-h-72 ax-w-auto ax-shadow-md" controls [src]="activeMedia()?.url"></video>
-          } @case ('image') {
-          <ax-image class="ax-rounded-lg ax-h-48 md:ax-h-72 ax-w-auto" [src]="activeMedia()?.url">
-            <ax-loading></ax-loading>
-            <ax-placeholder>
-              <div class="ax-w-96 ax-h-72 ax-gap-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-border ax-rounded-lg">
-                <ax-icon class="fa-solid fa-circle-exclamation ax-text-2xl"> </ax-icon>
-                <span>Connection Error!</span>
-              </div>
-            </ax-placeholder>
-          </ax-image>
-          } @case ('audio') {
-          <audio controls class="ax-rounded-lg">
-            <source [src]="activeMedia()?.url" type="audio/mp3" />
-          </audio>
-          } }
-          <div class="ax-flex ax-gap-4 ax-overflow-x-auto ax-max-w-[320px] lg:ax-max-w-[480px] ax-pb-2">
-            @for (media of thumbnails(); track $index) {
-            <div
-              *ngIf="getMediaInfo(media.name) as mediaInfo"
-              class="hover:ax-opacity-75 ax-transition-all ax-relative ax-cursor-pointer ax-flex ax-justify-center ax-items-center"
-              (click)="changeMediaSelected(media)"
-            >
-              <ax-image
-                class="ax-w-16 ax-brightness-50 ax-h-16 ax-rounded-lg ax-shadow-md ax-filter"
-                [src]="mediaInfo.format == 'image' ? media.url : media.posterUrl"
-              ></ax-image>
-              <div class="ax-absolute ax-text-neutral-300 ax-text-xl">
-                <ax-icon [class]="mediaInfo.icon"> </ax-icon>
-              </div>
-            </div>
-            }
-            <div axUploaderZone>
-              <div axUploaderBrowseHandle class="ax-flex ax-justify-center ax-items-center ax-w-16 ax-h-16 ax-border ax-rounded-lg ax-cursor-pointer">
-                <ax-icon class="fa-solid fa-plus ax-text-neutral-500"> </ax-icon>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      } @else {
-      <div class=" ax-col-start-1 ax-col-end-13">
-        <ax-uploader-drop-zone></ax-uploader-drop-zone>
-      </div>
-
-      }
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule, AXImageModule, AXDecoratorModule, AXLoadingModule, AXUploaderModule],
-                    inputs: []
-                }]
-        }], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-var galleryWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetEditComponent: AXPGalleryWidgetEditComponent
-});
-
-class AXPGalleryWidgetFilterComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPGalleryWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, FormsModule],
-                    inputs: []
-                }]
-        }] });
-
-var galleryWidgetFilter_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetFilterComponent: AXPGalleryWidgetFilterComponent
-});
-
-class AXPGalleryWidgetColumnComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPGalleryWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, 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: AXPGalleryWidgetColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
-                    inputs: ['rawValue']
-                }]
-        }] });
-
-var galleryWidgetColumn_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetColumnComponent: AXPGalleryWidgetColumnComponent
-});
-
 class AXPGalleryWidgetPrintComponent extends AXPWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGalleryWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPGalleryWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -7196,11 +6971,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-var galleryWidgetPrint_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGalleryWidgetPrintComponent: AXPGalleryWidgetPrintComponent
-});
-
 const AXPGalleryWidget = {
     name: 'gallery',
     title: 'Media Gallery',
@@ -7213,19 +6983,13 @@ const AXPGalleryWidget = {
             component: () => Promise.resolve().then(function () { return galleryWidgetView_component; }).then((c) => c.AXPGalleryWidgetViewComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetEdit_component; }).then((c) => c.AXPGalleryWidgetEditComponent),
-        },
-        filter: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetFilter_component; }).then((c) => c.AXPGalleryWidgetFilterComponent),
-        },
-        column: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetColumn_component; }).then((c) => c.AXPGalleryWidgetColumnComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetPrint_component; }).then((c) => c.AXPGalleryWidgetPrintComponent),
+            component: () => Promise.resolve().then(function () { return galleryWidgetView_component; }).then((c) => c.AXPGalleryWidgetViewComponent),
         },
+        // print: {
+        //   component: () => import('./gallery-widget-print.component').then((c) => c.AXPGalleryWidgetPrintComponent),
+        // },
         designer: {
-            component: () => Promise.resolve().then(function () { return galleryWidgetEdit_component; }).then((c) => c.AXPGalleryWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return galleryWidgetView_component; }).then((c) => c.AXPGalleryWidgetViewComponent),
         },
     },
 };
@@ -7641,7 +7405,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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$7.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,
@@ -7739,7 +7503,7 @@ class AXPSignatureWidgetViewComponent extends AXPWidgetComponent {
       <span>{{placeholder()}}</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$5.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$7.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,
@@ -9715,7 +9479,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n  <ax-selection-list [direction]=\"'horizontal'\" [items]=\"selectionItems\" [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\" [showControl]=\"false\" [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'ax-text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button color=\"primary\" text=\"Reset\" [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"></ax-button>\n\n<div class=\"axp-grid-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (onClick)=\"setGridDirection('row')\"\n        [selected]=\"gridDirection() === 'row'\"><ax-prefix><svg data-wf-icon=\"FlexFlowWrapIcon\" width=\"16\" height=\"16\"\n            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"></path>\n            <path opacity=\"0.4\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\" fill=\"currentColor\"></path>\n          </svg></ax-prefix></ax-button-group-item>\n      <ax-button-group-item class=\"ax-w-24\" (onClick)=\"setGridDirection('col')\"\n        [selected]=\"gridDirection() === 'col'\"><ax-prefix><svg data-wf-icon=\"FlexFlowColumnWrapIcon\" width=\"16\"\n            height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"></path>\n            <path opacity=\"0.4\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\" fill=\"currentColor\"></path>\n          </svg></ax-prefix></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box [minValue]=\"1\" [maxValue]=\"12\" [value]=\"gridTemplateRows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\" [changeOnScroll]=\"true\" [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"></ax-number-box>\n    <span class=\"ax-text-xs\">Column</span>\n    <ax-number-box [minValue]=\"1\" [maxValue]=\"12\" [value]=\"gridTemplateColumns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\" [changeOnScroll]=\"true\" [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\">\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div [attr.aria-label]=\"side.label\" [attr.aria-value]=\"side.value\" class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\" (mouseleave)=\"onHoverLeave()\" (click)=\"onClick(side)\">\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"hoveredJustify()\" [style.align-items]=\"hoveredAlign()\">\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"></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              style=\"color: white\">\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"></path>\n            </svg>\n            } @else{\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\">\n              <path d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\" [style.align-items]=\"clickedAlign()\">\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\" style=\"fill-opacity: 0.25\"></path>\n              <path d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\" style=\"fill-opacity: 0.25\"></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></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              style=\"color: white\">\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></path>\n            </svg>\n            } @else{\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\">\n              <path d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill: #cebcbc; fill-opacity: 0.16\"></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box [dataSource]=\"justifyDataSource\" [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\" textField=\"label\" valueField=\"value\" placeholder=\"Choose...\">\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box [dataSource]=\"alignDataSource\" [value]=\"selectedAlign()\" (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\" valueField=\"value\" placeholder=\"Choose...\">\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='single') {\n    <ax-range-slider class=\"ax-w-32\" color=\"secondary\" [values]=\"gap().x\"\n      (valuesChange)=\"setGap($event ?? 0, 'both')\"></ax-range-slider>\n    <ax-number-box [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().x\"\n      (onValueChanged)=\"setGap($event.value ?? 0, 'both')\" [changeOnScroll]=\"true\" class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"><ax-suffix><ax-text\n          class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\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 [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().x\" (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n        [changeOnScroll]=\"true\" class=\"ax-min-w-5\" [showSpinButtons]=\"false\"><ax-suffix><ax-text\n            class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().y\" [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\" class=\"ax-min-w-5\" [showSpinButtons]=\"false\"><ax-suffix><ax-text\n            class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\n    </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='single'){\n        <path fill-rule=\"evenodd\" 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\"></path>\n        }@else {\n        <path fill-rule=\"evenodd\" 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\"></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".axp-grid-breakpoints{font-size:.25rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul{gap:.5rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul>li>label{padding:.25rem!important}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}.axp-grid-option ax-range-slider:not(.ax-exclude){--ax-range-slider-base-thickness: .1rem}.axp-grid-option ax-range-slider:not(.ax-exclude) .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.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-subtitle, 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n  <ax-selection-list [direction]=\"'horizontal'\" [items]=\"selectionItems\" [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\" [showControl]=\"false\" [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"></ax-selection-list>\n</div>\n<ng-template #customTemplate let-item>\n  @let data = item.data;\n  <div [class]=\"isBreakpointConfigured()[data.id] ? 'ax-text-primary-300' : ''\">\n    {{ data.text }}\n  </div>\n</ng-template>\n<ax-button color=\"primary\" text=\"Reset\" [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"></ax-button>\n\n<div class=\"axp-grid-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span> Direction </span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item class=\"ax-w-24\" (onClick)=\"setGridDirection('row')\"\n        [selected]=\"gridDirection() === 'row'\"><ax-prefix><svg data-wf-icon=\"FlexFlowWrapIcon\" width=\"16\" height=\"16\"\n            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M3 4H11V3H3V4ZM13.8536 11.1464L10.8536 8.14645L10.1464 8.85355L12.2929 11H3V12H12.2929L10.1464 14.1464L10.8536 14.8536L13.8536 11.8536L14.2071 11.5L13.8536 11.1464Z\"\n              fill=\"currentColor\"></path>\n            <path opacity=\"0.4\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\" fill=\"currentColor\"></path>\n          </svg></ax-prefix></ax-button-group-item>\n      <ax-button-group-item class=\"ax-w-24\" (onClick)=\"setGridDirection('col')\"\n        [selected]=\"gridDirection() === 'col'\"><ax-prefix><svg data-wf-icon=\"FlexFlowColumnWrapIcon\" width=\"16\"\n            height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M4 3L4 11L3 11L3 3L4 3ZM11.1464 13.8536L8.14645 10.8536L8.85355 10.1464L11 12.2929L11 3L12 3L12 12.2929L14.1464 10.1464L14.8536 10.8536L11.8536 13.8536L11.5 14.2071L11.1464 13.8536Z\"\n              fill=\"currentColor\"></path>\n            <path opacity=\"0.4\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\" fill=\"currentColor\"></path>\n          </svg></ax-prefix></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box [minValue]=\"1\" [maxValue]=\"12\" [value]=\"gridTemplateRows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\" [changeOnScroll]=\"true\" [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"></ax-number-box>\n    <span class=\"ax-text-xs\">Column</span>\n    <ax-number-box [minValue]=\"1\" [maxValue]=\"12\" [value]=\"gridTemplateColumns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\" [changeOnScroll]=\"true\" [showSpinButtons]=\"false\"\n      class=\"ax-max-w-[4.45rem]\"></ax-number-box>\n    <!-- <button>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M7 3.29289C7.18754 3.10536 7.44189 3 7.70711 3H10.5C10.7022 3 10.8845 3.12182 10.9619 3.30866C11.0393 3.4955 10.9966 3.71055 10.8536 3.85355L9 5.70711V7H10.2929L12.1464 5.14645C12.2894 5.00345 12.5045 4.96067 12.6913 5.03806C12.8782 5.11545 13 5.29777 13 5.5V8.29289C13 8.55811 12.8946 8.81246 12.7071 9L11 10.7071C10.8125 10.8946 10.5581 11 10.2929 11H7.70711L4.85355 13.8536C4.65829 14.0488 4.34171 14.0488 4.14645 13.8536L2.14645 11.8536C1.95118 11.6583 1.95118 11.3417 2.14645 11.1464L5 8.29289V5.70711C5 5.44189 5.10536 5.18754 5.29289 5L7 3.29289ZM9.29289 4H7.70711L6 5.70711L6 8.29289C6 8.55811 5.89464 8.81246 5.70711 9L3.20711 11.5L4.5 12.7929L7 10.2929C7.18754 10.1054 7.44189 10 7.70711 10H10.2929L12 8.29289V6.70711L10.8536 7.85355C10.7598 7.94732 10.6326 8 10.5 8H8.5C8.22386 8 8 7.77614 8 7.5V5.5C8 5.36739 8.05268 5.24021 8.14645 5.14645L9.29289 4Z\"\n          fill=\"currentColor\"\n        ></path>\n      </svg>\n    </button> -->\n  </div>\n\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\">\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div [attr.aria-label]=\"side.label\" [attr.aria-value]=\"side.value\" class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\" (mouseleave)=\"onHoverLeave()\" (click)=\"onClick(side)\">\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"hoveredJustify()\" [style.align-items]=\"hoveredAlign()\">\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"></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              style=\"color: white\">\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"></path>\n            </svg>\n            } @else{\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\">\n              <path d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\" [style.align-items]=\"clickedAlign()\">\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\" style=\"fill-opacity: 0.25\"></path>\n              <path d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\" style=\"fill-opacity: 0.25\"></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\">\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></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              style=\"color: white\">\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill-opacity: 0.16; stroke: white\"></path>\n            </svg>\n            } @else{\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\">\n              <path d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\" stroke=\"currentColor\" style=\"fill: #cebcbc; fill-opacity: 0.16\"></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box [dataSource]=\"justifyDataSource\" [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\" textField=\"label\" valueField=\"value\" placeholder=\"Choose...\">\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-32\">\n        <ax-select-box [dataSource]=\"alignDataSource\" [value]=\"selectedAlign()\" (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\" valueField=\"value\" placeholder=\"Choose...\">\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='single') {\n    <ax-range-slider class=\"ax-w-32\" color=\"secondary\" [values]=\"gap().x\"\n      (valuesChange)=\"setGap($event ?? 0, 'both')\"></ax-range-slider>\n    <ax-number-box [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().x\"\n      (onValueChanged)=\"setGap($event.value ?? 0, 'both')\" [changeOnScroll]=\"true\" class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"><ax-suffix><ax-text\n          class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\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 [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().x\" (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n        [changeOnScroll]=\"true\" class=\"ax-min-w-5\" [showSpinButtons]=\"false\"><ax-suffix><ax-text\n            class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box [minValue]=\"0\" [maxValue]=\"999\" [value]=\"gap().y\" [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\" class=\"ax-min-w-5\" [showSpinButtons]=\"false\"><ax-suffix><ax-text\n            class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box>\n    </div>\n    }\n    <button (click)=\"toggleGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='single'){\n        <path fill-rule=\"evenodd\" 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\"></path>\n        }@else {\n        <path fill-rule=\"evenodd\" 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\"></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".axp-grid-breakpoints{font-size:.25rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul{gap:.5rem!important}.axp-grid-breakpoints>ax-selection-list:not(.ax-exclude)>ul>li>label{padding:.25rem!important}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-grid-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .5rem!important}.axp-grid-option ax-range-slider:not(.ax-exclude){--ax-range-slider-base-thickness: .1rem}.axp-grid-option ax-range-slider:not(.ax-exclude) .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.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-subtitle, 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -9887,7 +9651,7 @@ class AXPAdvancedGridOptionsWidgetEditComponent extends AXPWidgetComponent {
         this.selectedAlign.set({ value: align, label: this.findAlignNameById(align) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid ax-w-11/12\">\n  <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-x-3 ax-items-center ax-pb-2\">\n    <span>Columns</span>\n    <span>Items</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"changeValue($event, 'columns')\"\n    ></ax-number-box>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"99\"\n      [value]=\"items()\"\n      (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n    ></ax-number-box>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div\n        class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg\n              width=\"60\"\n              height=\"60\"\n              viewBox=\"0 0 60 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n              <path\n                d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill: #cebcbc; fill-opacity: 0.16\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-36\">\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-36\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-advanced-grid ax-w-11/12\">\n  <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-x-3 ax-items-center ax-pb-2\">\n    <span>Columns</span>\n    <span>Items</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"changeValue($event, 'columns')\"\n    ></ax-number-box>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"99\"\n      [value]=\"items()\"\n      (onValueChanged)=\"changeValue($event, 'itemsCount')\"\n    ></ax-number-box>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of gridSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      @if(hoveredJustify() && hoveredAlign()){\n      <div\n        class=\"axp-grid-option-hover ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {} @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.07; stroke-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"stroke-opacity: 0.25; fill-opacity: 0.07\"\n                class=\"hover:fill-opacity-20\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      }\n\n      <div\n        class=\"axp-grid-option-active ax-absolute ax-inset-0 ax-grid ax-pointer-events-none ax-transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\">\n            @if(clickedJustify()==='stretch' && clickedAlign()==='stretch') {\n            <svg\n              width=\"60\"\n              height=\"60\"\n              viewBox=\"0 0 60 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M55.5 55.48a.02.02 0 0 1-.02.02H4.52a.02.02 0 0 1-.02-.02V4.52a.02.02 0 0 1 .02-.02h50.96a.02.02 0 0 1 .02.02v50.96Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n              <path\n                d=\"m26.354 20.354 3.146-3.147V29.5h-3v1h3v12.293l-3.146-3.147-.707.708L30 44.707l4.354-4.353-.707-.708-3.147 3.147V30.5h12.293l-3.147 3.147.708.707L44.707 30l-4.353-4.354-.708.708 3.147 3.146H30.5V17.207l3.146 3.147.707-.707L30 15.293l-4.354 4.354.707.707Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n              <path\n                d=\"m17.207 30.5 3.146 3.147-.707.707L15.293 30l4.353-4.354.707.708-3.146 3.146H26.5v1h-9.293Z\"\n                fill=\"currentColor\"\n                style=\"fill-opacity: 0.25\"\n              ></path>\n            </svg>\n            } @else if(clickedJustify()==='stretch'){\n            <svg\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.5 4.6a.15.15 0 0 1 .033-.1h50.934l.003.003a.15.15 0 0 1 .03.097v10.8a.15.15 0 0 1-.03.097l-.003.003H4.533l-.003-.003a.15.15 0 0 1-.03-.097V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='stretch'){\n            <svg\n              width=\"20\"\n              height=\"60\"\n              viewBox=\"0 0 20 60\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: white\"\n            >\n              <path\n                d=\"M4.6 4.5h10.8a.15.15 0 0 1 .097.03l.003.003v50.934l-.003.003a.15.15 0 0 1-.097.03H4.6a.15.15 0 0 1-.1-.033V4.533l.003-.003A.15.15 0 0 1 4.6 4.5Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill-opacity: 0.16; stroke: white\"\n              ></path>\n            </svg>\n            } @else{\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              style=\"color: #efeaea\"\n            >\n              <path\n                d=\"M4.5 4.6a.1.1 0 0 1 .1-.1h10.8a.1.1 0 0 1 .1.1v10.8a.1.1 0 0 1-.1.1H4.6a.1.1 0 0 1-.1-.1V4.6Z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n                style=\"fill: #cebcbc; fill-opacity: 0.16\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span>X:</span>\n      <div class=\"ax-w-36\">\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [value]=\"selectedJustify()\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span>Y:</span>\n      <div class=\"ax-w-36\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [value]=\"selectedAlign()\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -10122,7 +9886,7 @@ class AXPBorderWidgetEditComponent extends AXPWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$6.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2 axp-border-container\">\n  <div class=\"ax-radius-box ax-flex ax-justify-between ax-items-center ax-gap-2 ax-h-[26px]\">\n    <span class=\"ax-text-sm ax-font-light\">Radius</span>\n    <div class=\"ax-flex ax-gap-2 ax-items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"sides\"\n        class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if(currentActiveRadiusSide() ==='all'){\n      <div class=\"ax-flex ax-justify-center ax-items-center ax-flex-shrink\">\n        <ax-range-slider\n          [values]=\"allRadius()\"\n          [min]=\"0\"\n          [max]=\"100\"\n          (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-28\"\n        ></ax-range-slider>\n      </div>\n      <div class=\"ax-flex ax-justify-start ax-items-center\">\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"100\"\n          [value]=\"allRadius()\"\n          [changeOnScroll]=\"true\"\n          (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n          class=\"ax-min-w-8\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n        >\n      </div>\n      }@else{\n      <div class=\"ax-w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides ax-flex ax-justify-end ax-items-center ax-overflow-y-hidden ax-transition-[height] ax-duration-300 ax-ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!ax-h-0' : '!ax-h-[56px]'\"\n  >\n    <div class=\"ax-grid ax-grid-cols-2 ax-grid-rows-2 ax-gap-2\">\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['top-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-left']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n      <div class=\"ax-flex ax-gap-1 ax-items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-12\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"calculatedValues().radius['bottom-right']\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ax-flex ax-justify-between ax-items-center ax-py-1\">\n    <span class=\"ax-text-sm ax-font-light\">Borders</span>\n  </div>\n\n  <div class=\"ax-border-box ax-flex ax-justify-between ax-items-center ax-gap-4\">\n    <div class=\"ax-grid ax-grid-cols-3 ax-grid-rows-3 ax-gap-1 ax-flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"ax-border-box-top ax-col-start-2 ax-row-start-1\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"top\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"ax-border-box-right ax-col-start-3 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"right\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"ax-border-box-bottom ax-col-start-2 ax-row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"ax-border-box-left ax-col-start-1 ax-row-start-2\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"left\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"ax-border-box-all ax-col-start-2 ax-row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"ax-p-1 hover:!ax-bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-gap-x-2 ax-gap-y-2\">\n      <div class=\"ax-text-sm ax-font-light\">Style</div>\n      <ax-button-group [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"ax-contents\" [class]=\"shownStyle() === 'none' ? 'ax-invisible' : 'ax-visible'\">\n        <div class=\"ax-text-sm ax-font-light\">Width</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (valueChange)=\"setBorder($event ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-min-w-8 ax-exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix><ax-text>PX</ax-text></ax-suffix></ax-number-box\n          >\n        </div>\n\n        <div class=\"ax-text-sm ax-font-light\">Color</div>\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-max-w-36 ax-overflow-hidden\">\n          <ax-color-box\n            [value]=\"shownColor()\"\n            (valueChange)=\"setBorder($event, 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".axp-border-container{--hover-effect: #404040;--focus-color: rgba(0, 106, 204, .18);--ax-range-slider-base-thickness: .15rem}.axp-border-container ax-range-slider{padding:.5rem!important}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child{height:1.5rem!important;border-radius:.25rem!important;font-size:12px}.axp-border-container ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-border-container ax-button-group ax-button-group-item{padding:.2rem .55rem!important}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.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$8.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], 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,
@@ -10414,7 +10178,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of flexSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } } @else if(hoveredAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }@else if (hoveredAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @if(clickedAlign()==='stretch'){\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='baseline'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n            </svg>\n            } @else{\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } } @else if(clickedJustify()==='space-around'){ @if(clickedAlign()==='stretch'){\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg\n              data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n            </svg>\n            } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } } @else if(clickedAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if (clickedAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span class=\"ax-order-1\">X:</span>\n      <div class=\"ax-w-32\"\n      [style.order]=\"flexDirectionIsColumn()?'4':'2'\">\n        <!-- <ax-select-box\n          [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n          [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n          (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n          (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box> -->\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span class=\"ax-order-3\">Y:</span>\n      <div class=\"ax-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"secondary\"\n      [ngModel]=\"gap().both\"\n      (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      [changeOnScroll]=\"true\"\n      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\n    } @else {\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().y\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='both'){\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n          fill=\"currentColor\"\n        ></path>\n        }@else {\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n          fill=\"currentColor\"\n        ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item color=\"primary\">\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            <ax-button-item text=\"Wrap\" (click)=\"setWrapMode('wrap')\" [class]=\"\" >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-bars\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item  text=\"No Wrap\" (click)=\"setWrapMode('nowrap')\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-minus\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-solid fa-chevron-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Align</span>\n  <div class=\"ax-flex ax-justify-between ax-gap-2 ax-items-center\">\n    <div\n      class=\"ax-relative ax-size-[62px] ax-bg-[rgb(30,30,30)] ax-border ax-border-white ax-border-opacity-15 ax-rounded\"\n    >\n      <div class=\"ax-absolute ax-inset-0 ax-grid ax-grid-cols-3 ax-grid-rows-3\">\n        @for(side of flexSides; track side.value){\n        <div\n          [attr.aria-label]=\"side.label\"\n          [attr.aria-value]=\"side.value\"\n          class=\"ax-grid ax-place-content-center\"\n          (mouseenter)=\"onHover(side)\"\n          (mouseleave)=\"onHoverLeave()\"\n          (click)=\"onClick(side)\"\n        >\n          @if (true) {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"7\" y=\"7\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n          </svg>\n          }\n        </div>\n        }\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[1] ax-rounded-lg  ax-bg-[rgb(30,30,30)] ax-flex-none\" [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(hoveredJustify()==='space-between'){ @if(clickedAlign()==='stretch'){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } } @else if(hoveredJustify()==='space-around'){ @if(clickedAlign()==='stretch' ){ } @else if(clickedAlign()==='baseline' && hoveredAlign()==='flex-start' ){ } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\" fill-opacity=\"0.3\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } } @else if(hoveredAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }@else if (hoveredAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if (hoveredAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            } @else if(hoveredAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n                fill-opacity=\"0.3\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"ax-absolute ax-inset-0 ax-flex ax-pointer-events-none ax-transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n\n      >\n        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div class=\"ax-size-auto ax-z-[2] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n          [class]=\"flexDirectionIsColumn()? '-ax-rotate-90': ''\">\n            @if(clickedJustify()==='space-between'){ @if(clickedAlign()==='stretch'){\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11 53.5C11 53.7761 10.7761 54 10.5 54H9.5C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6H10.5C10.7761 6 11 6.22386 11 6.5L11 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM50.5 54C50.7761 54 51 53.7761 51 53.5L51 6.5C51 6.22386 50.7761 6 50.5 6H49.5C49.2239 6 49 6.22386 49 6.5L49 53.5C49 53.7761 49.2239 54 49.5 54H50.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if(clickedAlign()==='baseline'){\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M50.5996 4V10.2929L52.246 8.64645L52.9531 9.35355L50.0996 12.2071L47.246 9.35355L47.9531 8.64645L49.5996 10.2929V4H50.5996Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M9.35294 4H11.1012L13.4542 12H12.4119L11.8236 9.99994H8.63061L8.04236 12H7L9.35294 4ZM11.5295 8.99994L10.353 4.9999H10.1012L8.92473 8.99994H11.5295Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n            </svg>\n            } @else{\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5V15.5C31 15.7761 30.7761 16 30.5 16H29.5C29.2239 16 29 15.7761 29 15.5V6.5ZM9 8.5C9 8.22386 9.22386 8 9.5 8H10.5C10.7761 8 11 8.22386 11 8.5V12.5C11 12.7761 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V8.5ZM49.5 8C49.2239 8 49 8.22386 49 8.5V14.5C49 14.7761 49.2239 15 49.5 15H50.5C50.7761 15 51 14.7761 51 14.5V8.5C51 8.22386 50.7761 8 50.5 8H49.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } } @else if(clickedJustify()==='space-around'){ @if(clickedAlign()==='stretch'){\n            <svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 30L5 32L5 28L8 30Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M13 53.5C13 53.7761 12.7761 54 12.5 54H11.5C11.2239 54 11 53.7761 11 53.5L11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5L13 53.5ZM31 53.5C31 53.7761 30.7761 54 30.5 54H29.5C29.2239 54 29 53.7761 29 53.5L29 6.5C29 6.22386 29.2239 6 29.5 6H30.5C30.7761 6 31 6.22386 31 6.5L31 53.5ZM48.5 54C48.7761 54 49 53.7761 49 53.5L49 6.5C49 6.22386 48.7761 6 48.5 6H47.5C47.2239 6 47 6.22386 47 6.5L47 53.5C47 53.7761 47.2239 54 47.5 54H48.5Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M52 30L55 28L55 32L52 30Z\" fill=\"currentColor\"></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg\n              data-wf-icon=\"NineBoxAlignItemsRowSpaceAroundBaselineIcon\"\n              width=\"60\"\n              height=\"20\"\n              viewBox=\"0 0 60 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M40.8529 4V10.2929L42.4993 8.64645L43.2064 9.35355L40.3529 12.2071L37.4993 9.35355L38.2064 8.64645L39.8529 10.2929V4H40.8529Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M19.3523 4H21.1006L23.4536 12H22.4112L21.8229 9.99994H18.6299L18.0417 12H16.9993L19.3523 4ZM21.5288 8.99994L20.3523 4.9999H20.1005L18.924 8.99994H21.5288Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M6 14H54V15H6V14Z\" fill=\"currentColor\"></path>\n            </svg>\n            } @else {\n            <svg width=\"60\" height=\"20\" viewBox=\"0 0 60 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"11\" y=\"9\" width=\"2\" height=\"5\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"29\" y=\"6\" width=\"2\" height=\"10\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <rect x=\"47\" y=\"8\" width=\"2\" height=\"7\" rx=\"0.5\" fill=\"currentColor\"></rect>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 13L8 11L5 9V13ZM55 9L52 11L55 13V9Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } } @else if(clickedAlign()==='flex-start'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.5 7C3.22386 7 3 6.77614 3 6.5V3.5C3 3.22386 3.22386 3 3.5 3H4.5C4.77614 3 5 3.22386 5 3.5V6.5C5 6.77614 4.77614 7 4.5 7H3.5ZM7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM11.5 3C11.2239 3 11 3.22386 11 3.5V8.5C11 8.77614 11.2239 9 11.5 9H12.5C12.7761 9 13 8.77614 13 8.5V3.5C13 3.22386 12.7761 3 12.5 3H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if (clickedAlign()==='center') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.5 13C7.22386 13 7 12.7761 7 12.5V3.5C7 3.22386 7.22386 3 7.5 3H8.5C8.77614 3 9 3.22386 9 3.5V12.5C9 12.7761 8.77614 13 8.5 13H7.5ZM3.5 10C3.22386 10 3 9.77614 3 9.5V6.5C3 6.22386 3.22386 6 3.5 6H4.5C4.77614 6 5 6.22386 5 6.5V9.5C5 9.77614 4.77614 10 4.5 10H3.5ZM11.5 5C11.2239 5 11 5.22386 11 5.5V10.5C11 10.7761 11.2239 11 11.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H11.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='flex-end') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.5 7C11.2239 7 11 7.22386 11 7.5L11 12.5C11 12.7761 11.2239 13 11.5 13L12.5 13C12.7761 13 13 12.7761 13 12.5L13 7.5C13 7.22386 12.7761 7 12.5 7L11.5 7ZM7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.5C7 3.22386 7.22386 3 7.5 3L8.5 3C8.77614 3 9 3.22386 9 3.5L9 12.5C9 12.7761 8.77614 13 8.5 13L7.5 13ZM3.5 13C3.22386 13 3 12.7761 3 12.5L3 9.5C3 9.22386 3.22386 9 3.5 9L4.5 9C4.77614 9 5 9.22386 5 9.5L5 12.5C5 12.7761 4.77614 13 4.5 13L3.5 13Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            } @else if (clickedAlign()==='stretch') {\n            <svg width=\"20\" height=\"60\" viewBox=\"0 0 20 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7 53.5C7 53.7761 6.77614 54 6.5 54L5.5 54C5.22386 54 5 53.7761 5 53.5L5 6.5C5 6.22386 5.22386 6 5.5 6L6.5 6C6.77614 6 7 6.22386 7 6.5L7 53.5ZM11 53.5C11 53.7761 10.7761 54 10.5 54L9.5 54C9.22386 54 9 53.7761 9 53.5L9 6.5C9 6.22386 9.22386 6 9.5 6L10.5 6C10.7761 6 11 6.22386 11 6.5L11 53.5ZM14.5 54C14.7761 54 15 53.7761 15 53.5L15 6.5C15 6.22386 14.7761 6 14.5 6L13.5 6C13.2239 6 13 6.22386 13 6.5L13 53.5C13 53.7761 13.2239 54 13.5 54L14.5 54Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }@else if(clickedAlign()==='baseline'){\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13 2V8.29289L14.6464 6.64645L15.3536 7.35355L12.5 10.2071L9.64645 7.35355L10.3536 6.64645L12 8.29289V2H13Z\"\n                fill=\"currentColor\"\n              ></path>\n              <path d=\"M16 12L1 12V13L16 13V12Z\" fill=\"currentColor\"></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4.62582 2H6.37412L8.72712 10H7.68476L7.09649 7.99994H3.90349L3.31524 10H2.27288L4.62582 2ZM6.80237 6.99994L5.62585 2.9999H5.37409L4.19761 6.99994H6.80237Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ax-grid ax-grid-cols-[auto_1fr] ax-items-center ax-justify-items-start ax-gap-2\">\n      <span class=\"ax-order-1\">X:</span>\n      <div class=\"ax-w-32\"\n      [style.order]=\"flexDirectionIsColumn()?'4':'2'\">\n        <!-- <ax-select-box\n          [dataSource]=\"flexDirectionIsColumn()? alignDataSource : justifyDataSource\"\n          [ngModel]=\"flexDirectionIsColumn()? selectedAlign : selectedJustify\"\n          (ngModelChange)=\"flexDirectionIsColumn()? selectedAlign = $event : selectedJustify = $event\"\n          (onValueChanged)=\"flexDirectionIsColumn()? onAlignChange($event) :onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box> -->\n        <ax-select-box\n          [dataSource]=\"justifyDataSource\"\n          [(ngModel)]=\"selectedJustify\"\n          (onValueChanged)=\"onJustifyChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n      <span class=\"ax-order-3\">Y:</span>\n      <div class=\"ax-w-32\" [style.order]=\"flexDirectionIsColumn()?'2':'4'\">\n        <ax-select-box\n          [dataSource]=\"alignDataSource\"\n          [(ngModel)]=\"selectedAlign\"\n          (onValueChanged)=\"onAlignChange($event)\"\n          textField=\"label\"\n          valueField=\"value\"\n          placeholder=\"Choose...\"\n        >\n        </ax-select-box>\n      </div>\n    </div>\n  </div>\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between\">\n    @if(gapMode()==='both') {\n    <ax-range-slider\n      class=\"ax-w-32\"\n      color=\"secondary\"\n      [ngModel]=\"gap().both\"\n      (ngModelChange)=\"setGap($event ?? 0, 'both')\"\n    ></ax-range-slider>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"999\"\n      [value]=\"gap().both\"\n      [changeOnScroll]=\"true\"\n      (valueChange)=\"setGap($event ?? 0, 'both')\"\n      class=\"ax-min-w-6\"\n      [showSpinButtons]=\"false\"\n      ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n    >\n    } @else {\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <span class=\"ax-text-xs\">Row</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'x')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n      <span class=\"ax-text-xs\">Column</span>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().y\"\n        [changeOnScroll]=\"true\"\n        (valueChange)=\"setGap($event ?? 0, 'y')\"\n        class=\"ax-min-w-5\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"!ax-text-xs !ax-px-1\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    </div>\n    }\n    <button (click)=\"setGapMode()\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        @if(gapMode()==='both'){\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5 7L5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5V7C11.5523 7 12 7.44772 12 8V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V8C4 7.44771 4.44772 7 5 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM5 12V8H11V12H5Z\"\n          fill=\"currentColor\"\n        ></path>\n        }@else {\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9 5C9 3.89543 9.89543 3 11 3C12.1046 3 13 3.89543 13 5V6H14V5C14 3.34315 12.6569 2 11 2C9.34315 2 8 3.34315 8 5V7H3C2.44772 7 2 7.44771 2 8V12C2 12.5523 2.44772 13 3 13H9C9.55228 13 10 12.5523 10 12V8C10 7.44772 9.55228 7 9 7V5ZM3 8H9V12H3V8Z\"\n          fill=\"currentColor\"\n        ></path>\n        }\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{height:2rem!important;border-radius:.3rem!important;font-size:12px}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child input{padding:.25rem 0 .25rem .25rem!important}.axp-flex-option ax-button-group>ax-button-group-item{width:2.62rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$7.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$7.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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,
@@ -10702,7 +10466,7 @@ class AXPBaseValidationComponent {
     </div>
     <ng-content></ng-content>
     <div #el class="ax-h-[1px]"></div>
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$4.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$5.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBaseValidationComponent, decorators: [{
             type: Component,
@@ -10798,7 +10562,7 @@ class AXPBetweenValidationWidgetEditComponent extends AXPWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBetweenValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -10911,7 +10675,7 @@ class AXPCallbackValidationWidgetEditComponent extends AXPWidgetComponent {
         ax
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { 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 }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPCallbackValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11003,7 +10767,7 @@ class AXPEqualValidationWidgetEditComponent extends AXPWidgetComponent {
         ></ax-text-box>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEqualValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11100,7 +10864,7 @@ class AXPGreaterThanValidationWidgetEditComponent extends AXPWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGreaterThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11209,7 +10973,7 @@ class AXPLessThanValidationWidgetEditComponent extends AXPWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLessThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11312,7 +11076,7 @@ class AXPMaxLengthValidationWidgetEditComponent extends AXPWidgetComponent {
         ></ax-number-box>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMaxLengthValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11403,7 +11167,7 @@ class AXPMinLengthValidationWidgetEditComponent extends AXPWidgetComponent {
         ></ax-number-box>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPMinLengthValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11494,7 +11258,7 @@ class AXPRegularExpressionValidationWidgetEditComponent extends AXPWidgetCompone
         ></ax-text-box>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPRegularExpressionValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -11612,19 +11376,27 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
         this.chartEl = viewChild.required('chart');
         this.data = linkedSignal(() => this.getValue());
         this.isRendered = false;
+        // Constants
+        this.DEFAULT_COLOR = 'steelblue';
+        this.DEFAULT_MARGIN = { top: 10, right: 0, bottom: 20, left: 20 };
+        this.BAR_TRANSITION_DELAY = 10;
+        // After the next render, load D3, create the chart, and mark rendering complete
         this.#af = afterNextRender(async () => {
             await this.loadD3();
-            this.initializeChart();
+            this.createChart();
             this.isRendered = true;
+            //(window as any).chart = this; // Debug purpose only
         });
+        // Reactively update the chart when the data signal changes
         this.#eff = effect(() => {
-            this.data();
-            if (this.isRendered) {
+            if (this.isRendered && this.data()) {
                 this.updateChart(this.data());
             }
         });
     }
+    // After the next render, load D3, create the chart, and mark rendering complete
     #af;
+    // Reactively update the chart when the data signal changes
     #eff;
     async loadD3() {
         try {
@@ -11634,170 +11406,99 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
             console.error('Failed to load D3.js:', error);
         }
     }
-    initializeChart() {
-        const chartValue = this.data();
-        const { width, height, margin } = this.getChartDimensions(chartValue.options);
-        // Clear existing SVG if it exists
-        if (this.svg) {
-            this.svg.selectAll('*').remove();
-        }
-        // Create SVG
-        this.svg = this.d3.select(this.chartEl().nativeElement).append('svg').attr('width', width).attr('height', height);
-        this.drawChart(chartValue);
-    }
-    drawChart(chartValue) {
-        const { data, options } = chartValue;
-        const { width, height, margin } = this.getChartDimensions(options);
-        const x = this.createXScale(data, width, margin);
-        const y = this.createYScale(data, height, margin);
-        this.drawBars(data, x, y, height, margin, options);
-        this.drawAxes(x, y, height, margin, options);
-        if (options.enableTooltip) {
-            this.addTooltips(data, x, y, options);
-        }
-    }
-    updateChart(chartValue) {
-        const { data, options } = chartValue;
-        // Clear existing chart content
-        this.svg.selectAll('*').remove();
-        // Re-render chart with new options
-        this.drawChart(chartValue);
-    }
-    getChartDimensions(options) {
-        const baseWidth = options.width || 400;
-        const baseHeight = options.height || 200;
-        const margin = options.margin || { top: 100, right: 20, bottom: 30, left: 40 };
-        return { width: baseWidth, height: baseHeight, margin };
-    }
-    createXScale(data, width, margin) {
-        return this.d3
-            .scaleBand()
-            .domain(data.map((d) => d.name))
-            .range([margin.left, width - margin.right])
-            .padding(0.1);
-    }
-    createYScale(data, height, margin) {
-        return this.d3
-            .scaleLinear()
-            .domain([0, this.d3.max(data, (d) => d.value)])
-            .nice()
-            .range([height - margin.bottom, margin.top]);
-    }
-    drawBars(data, x, y, height, margin, options) {
-        this.svg
-            .selectAll('rect')
-            .data(data)
+    createChart(dataValue = this.data()) {
+        const element = this.chartEl().nativeElement;
+        this.margin = {
+            top: (dataValue?.options?.margin?.top ?? 0) + this.DEFAULT_MARGIN.top,
+            bottom: (dataValue?.options?.margin?.bottom ?? 0) + this.DEFAULT_MARGIN.bottom,
+            left: (dataValue?.options?.margin?.left ?? 0) + this.DEFAULT_MARGIN.left,
+            right: (dataValue?.options?.margin?.right ?? 0) + this.DEFAULT_MARGIN.right,
+        };
+        this.width = (dataValue?.options?.width ?? element.offsetWidth) - (this.margin.left + this.margin.right);
+        this.height = (dataValue?.options?.height ?? element.offsetHeight) - (this.margin.top + this.margin.bottom);
+        this.initializeSVG(element);
+        this.initializeScales(dataValue);
+        this.initializeAxes();
+        this.updateChart();
+    }
+    initializeSVG(element) {
+        this.svg = this.d3
+            .select(element)
+            .append('svg')
+            .attr('width', this.width + this.margin.left + this.margin.right)
+            .attr('height', this.height + this.margin.top + this.margin.bottom);
+        this.chart = this.svg
+            .append('g')
+            .attr('class', 'axp-bar-chart-bars')
+            .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
+    }
+    initializeScales(dataValue) {
+        const xDomain = dataValue.data.map((d) => d.label);
+        const yDomain = [0, this.d3.max(dataValue.data, (d) => d.value) ?? 100];
+        this.xScale = this.d3.scaleBand().padding(0.1).domain(xDomain).rangeRound([0, this.width]);
+        this.yScale = this.d3.scaleLinear().domain(yDomain).range([this.height, 0]);
+        this.colors = this.createColorScale(dataValue);
+    }
+    createColorScale(dataValue) {
+        const { data, options } = dataValue;
+        const colors = options.color || [this.DEFAULT_COLOR];
+        const domain = data.length === 1 ? [0, data.length - 1] : data.map((_, i) => (i / (data.length - 1)) * (data.length - 1));
+        const range = !Array.isArray(colors) ? [colors, colors] : [colors[0], colors[colors.length - 1]];
+        return this.d3.scaleLinear().domain(domain).range(range);
+    }
+    initializeAxes() {
+        this.xAxis = this.chart
+            .append('g')
+            .attr('class', 'axp-bar-chart-axis-x')
+            .attr('transform', `translate(0, ${this.height})`)
+            .call(this.d3.axisBottom(this.xScale));
+        this.yAxis = this.chart.append('g').attr('class', 'axp-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
+    }
+    updateChart(dataValue = this.data()) {
+        this.updateScales(dataValue);
+        this.updateAxes();
+        this.updateBars(dataValue);
+    }
+    updateScales(dataValue) {
+        this.xScale.domain(dataValue.data.map((d) => d.label));
+        this.yScale.domain([0, this.d3.max(dataValue.data, (d) => d.value) ?? 100]);
+        this.colors.domain([0, dataValue.data.length]);
+    }
+    updateAxes() {
+        this.xAxis.transition().call(this.d3.axisBottom(this.xScale));
+        this.yAxis.transition().call(this.d3.axisLeft(this.yScale));
+    }
+    updateBars(dataValue) {
+        const bars = this.chart.selectAll('.axp-bar-chart-bar').data(dataValue.data);
+        bars.exit().remove();
+        bars
+            .transition()
+            .attr('x', (d) => this.xScale(d.label))
+            .attr('y', (d) => this.yScale(d.value))
+            .attr('width', this.xScale.bandwidth())
+            .attr('height', (d) => this.height - this.yScale(d.value))
+            .style('fill', (d, i) => d.color ?? this.colors(i));
+        bars
             .enter()
             .append('rect')
-            .attr('x', (d) => x(d.name) || 0)
-            .attr('y', height - margin.bottom)
-            .attr('width', x.bandwidth())
+            .attr('class', 'axp-bar-chart-bar')
+            .attr('x', (d) => this.xScale(d.label))
+            .attr('y', (d) => this.yScale(0))
+            .attr('width', this.xScale.bandwidth())
             .attr('height', 0)
-            .attr('fill', (d) => d.color || options.color || 'teal')
+            .attr('data-id', (d) => d.id ?? AXPDataGenerator.uuid())
+            .style('fill', (d, i) => d.color ?? this.colors(i))
             .transition()
-            .duration(500)
-            .attr('y', (d) => y(d.value))
-            .attr('height', (d) => y(0) - y(d.value));
-    }
-    drawAxes(x, y, height, margin, options) {
-        const axisColor = options.axisColor || '#000';
-        const axisFontSize = options.axisFontSize || 12;
-        // Draw X axis
-        this.svg
-            .append('g')
-            .attr('class', 'axp-bar-chart-x-axis')
-            .attr('transform', `translate(0,${height - margin.bottom})`)
-            .call(this.d3.axisBottom(x).tickSizeOuter(0))
-            .attr('color', axisColor)
-            .style('font-size', `${axisFontSize}px`);
-        // Draw Y axis
-        this.svg
-            .append('g')
-            .attr('class', 'axp-bar-chart-y-axis')
-            .attr('transform', `translate(${margin.left},0)`)
-            .call(this.d3.axisLeft(y))
-            .attr('color', axisColor)
-            .style('font-size', `${axisFontSize}px`);
-    }
-    addTooltips(data, x, y, options) {
-        this.tooltip = this.svg.append('g').attr('class', 'axp-bar-chart-tooltip').style('opacity', 0);
-        this.tooltip
-            .append('rect')
-            .attr('width', 80)
-            .attr('height', 30)
-            .attr('fill', options.tooltipBackground || '#fff')
-            .attr('rx', 4)
-            .attr('ry', 4);
-        this.tooltip
-            .append('text')
-            .attr('x', 40)
-            .attr('y', 20)
-            .attr('text-anchor', 'middle')
-            .attr('fill', options.tooltipTextColor || '#000')
-            .style('font-size', '11px');
-        this.svg
-            .selectAll('rect')
-            .on('mouseover', (event, d) => {
-            const barX = x(d.name) || 0;
-            const barY = y(d.value);
-            // Adjust tooltip position to stay within SVG boundaries
-            const tooltipX = Math.min(barX + x.bandwidth() / 2 - 40, Number.parseInt(this.svg.attr('width')) - 80);
-            const tooltipY = Math.max(barY - 40, 0);
-            this.tooltip.style('opacity', 1).attr('transform', `translate(${tooltipX},${tooltipY})`);
-            this.tooltip.select('text').text(`${d.name}: ${d.value}`);
-        })
-            .on('mouseout', () => {
-            this.tooltip.style('opacity', 0);
-        });
-    }
-    // API to render legend in another component
-    renderLegend(data, options, container) {
-        const legend = this.d3.select(container).append('div').attr('class', 'axp-bar-chart-legend');
-        const legendItems = legend
-            .selectAll('.legend-item')
-            .data(data)
-            .enter()
-            .append('div')
-            .attr('class', 'axp-bar-chart-legend-item')
-            .style('display', 'flex')
-            .style('align-items', 'center')
-            .style('margin-bottom', '5px');
-        legendItems
-            .append('div')
-            .style('width', '16px')
-            .style('height', '16px')
-            .style('background-color', (d) => d.color || options.color || 'teal')
-            .style('margin-right', '8px');
-        legendItems
-            .append('div')
-            .text((d) => d.name)
-            .style('font-size', '12px');
-    }
-    // API to export chart as PNG
-    exportChartAsPNG() {
-        const svgElement = this.svg.node();
-        if (svgElement) {
-            const serializer = new XMLSerializer();
-            const svgString = serializer.serializeToString(svgElement);
-            return 'data:image/svg+xml;base64,' + btoa(svgString);
-        }
-        return null;
-    }
-    ngOnDestroy() {
-        if (this.svg) {
-            this.svg.selectAll('*').remove();
-        }
+            .delay((d, i) => i * (this.getValue().options.transitionDelayMs ?? this.BAR_TRANSITION_DELAY))
+            .attr('y', (d) => this.yScale(d.value) - 0.5)
+            .attr('height', (d) => this.height - this.yScale(d.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-justify-center ax-items-center" #chart></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div class="axp-bar-chart" #chart></div>`, isInline: true, styles: [".axp-bar-chart{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetEditComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: `<div class="ax-flex ax-justify-center ax-items-center" #chart></div>`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ template: `<div class="axp-bar-chart" #chart></div>`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".axp-bar-chart{width:100%;height:100%}\n"] }]
         }] });
 
 var barChartWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -11923,6 +11624,259 @@ const AXPDonutChartWidget = {
     },
 };
 
+class AXPGaugeChartWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.chartContainerEl = viewChild.required('chartContainer');
+        this.chartEl = viewChild.required('chart');
+        this.#af = afterNextRender(async () => {
+            await this.loadD3();
+            this.createChart();
+        });
+    }
+    #af;
+    async loadD3() {
+        try {
+            this.d3 = await import('d3');
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    createChart() {
+        const chartValue = this.getValue(); // Get the AXPGaugeChartValue
+        if (!chartValue || !chartValue.data || !chartValue.options) {
+            console.error('Invalid chart data or options');
+            return;
+        }
+        const { data, options } = chartValue;
+        const { width, height, minValue, maxValue, thresholds, label, animationDuration } = options;
+        // Clear any existing chart
+        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
+        // Set up SVG dimensions
+        const svg = this.d3.select(this.chartEl().nativeElement).attr('width', width).attr('height', height);
+        // Create a group for the chart
+        const chartGroup = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
+        // Draw the background arc
+        this.drawBackgroundArc(chartGroup, width);
+        // Draw the threshold arcs and labels
+        this.drawThresholds(chartGroup, width, minValue, maxValue, thresholds);
+        // Draw the dial/needle
+        this.drawDial(chartGroup, width, data.value, minValue, maxValue);
+        // Add the label
+        this.drawLabel(chartGroup, label);
+    }
+    /**
+     * Draw the background arc.
+     */
+    drawBackgroundArc(chartGroup, width) {
+        const backgroundArc = this.d3
+            .arc()
+            .innerRadius(width * 0.3)
+            .outerRadius(width * 0.4)
+            .startAngle(-Math.PI / 2)
+            .endAngle(Math.PI / 2);
+        chartGroup
+            .append('path')
+            .attr('d', backgroundArc({
+            innerRadius: width * 0.3,
+            outerRadius: width * 0.4,
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI / 2,
+        }))
+            .attr('fill', '#eee');
+    }
+    /**
+     * Draw the threshold arcs and labels.
+     */
+    drawThresholds(chartGroup, width, minValue, maxValue, thresholds) {
+        const arc = this.d3
+            .arc()
+            .innerRadius(width * 0.3)
+            .outerRadius(width * 0.4);
+        let previousEndAngle = -Math.PI / 2;
+        thresholds.forEach((threshold) => {
+            const range = threshold.range;
+            const endAngle = this.scaleValueToAngle(range, minValue, maxValue);
+            // Draw the threshold arc
+            chartGroup
+                .append('path')
+                .attr('d', arc({
+                innerRadius: width * 0.3,
+                outerRadius: width * 0.4,
+                startAngle: previousEndAngle,
+                endAngle,
+            }))
+                .attr('fill', threshold.color);
+            // Draw the threshold label
+            this.drawThresholdLabel(chartGroup, width, endAngle, range.toString());
+            previousEndAngle = endAngle;
+        });
+    }
+    /**
+     * Draw a threshold label.
+     */
+    drawThresholdLabel(chartGroup, width, angle, text) {
+        const labelRadius = width * 0.45; // Position outside the arc
+        const labelX = labelRadius * Math.cos(angle);
+        const labelY = labelRadius * Math.sin(angle);
+        // Calculate the rotation angle in degrees
+        const rotationAngle = this.radiansToDegrees(angle);
+        chartGroup
+            .append('text')
+            .attr('x', labelX)
+            .attr('y', labelY)
+            .attr('text-anchor', 'middle') // Center the text
+            .attr('dy', '0.35em')
+            .attr('transform', `rotate(${rotationAngle}, ${labelX}, ${labelY})`) // Rotate label
+            .text(text)
+            .style('font-size', '12px')
+            .style('fill', '#000');
+    }
+    /**
+     * Draw the dial/needle.
+     */
+    drawDial(chartGroup, width, value, minValue, maxValue) {
+        const valueAngle = this.scaleValueToAngle(value, minValue, maxValue);
+        chartGroup
+            .append('line')
+            .attr('x1', 0)
+            .attr('y1', 0)
+            .attr('x2', width * 0.35 * Math.cos(valueAngle))
+            .attr('y2', width * 0.35 * Math.sin(valueAngle))
+            .attr('stroke', '#000')
+            .attr('stroke-width', 2);
+    }
+    /**
+     * Draw the chart label.
+     */
+    drawLabel(chartGroup, label) {
+        chartGroup
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('dy', '0.35em')
+            .text(label || '')
+            .style('font-size', '16px')
+            .style('fill', '#000');
+    }
+    /**
+     * Scale a value to an angle for the gauge chart.
+     */
+    scaleValueToAngle(value, min, max) {
+        const scaledValue = (value - min) / (max - min);
+        return -Math.PI / 2 + scaledValue * Math.PI;
+    }
+    /**
+     * Convert radians to degrees.
+     */
+    radiansToDegrees(radians) {
+        return radians * (180 / Math.PI);
+    }
+    ngOnDestroy() {
+        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPGaugeChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-justify-center ax-items-center" #chartContainer>
+      <svg #chart></svg>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-flex ax-justify-center ax-items-center" #chartContainer>
+      <svg #chart></svg>
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var gaugeChartWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPGaugeChartWidgetEditComponent: AXPGaugeChartWidgetEditComponent
+});
+
+const AXPGaugeChartWidget = {
+    name: 'gauge-chart',
+    title: 'Gauge Chart Widget',
+    group: AXP_WIDGETS_CHART_GROUP,
+    type: 'chart',
+    icon: 'fa-solid fa-gauge',
+    visible: false,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return gaugeChartWidgetEdit_component; }).then((c) => c.AXPGaugeChartWidgetEditComponent),
+        },
+    },
+};
+
+class AXPStickyNoteWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.value = linkedSignal(() => this.getValue());
+    }
+    valueChange(event) {
+        if (event.isUserInteraction) {
+            this.value.set(event.value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStickyNoteWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPStickyNoteWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-size-full ax-rounded-lg ax-bg-warning-200">
+      <ax-wysiwyg-container
+        class="ax-size-full ax-p-2"
+        placeHolder="enter your note here"
+        look="none"
+        (onValueChanged)="valueChange($event)"
+        [ngModel]="value()"
+      >
+        <ax-wysiwyg-view class="!ax-size-full ax-border-b-0"></ax-wysiwyg-view>
+      </ax-wysiwyg-container>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i2$3.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$3.AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: ["class"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStickyNoteWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    <div class="ax-size-full ax-rounded-lg ax-bg-warning-200">
+      <ax-wysiwyg-container
+        class="ax-size-full ax-p-2"
+        placeHolder="enter your note here"
+        look="none"
+        (onValueChanged)="valueChange($event)"
+        [ngModel]="value()"
+      >
+        <ax-wysiwyg-view class="!ax-size-full ax-border-b-0"></ax-wysiwyg-view>
+      </ax-wysiwyg-container>
+    </div>
+  `, standalone: true, imports: [AXWysiwygModule, AXDecoratorModule, AXToolBarModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }] });
+
+var stickyNoteWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPStickyNoteWidgetEditComponent: AXPStickyNoteWidgetEditComponent
+});
+
+const AXPStickyNoteWidget = {
+    name: 'sticky-note',
+    title: 'Sticky Note Widget',
+    group: AXP_WIDGETS_CHART_GROUP,
+    type: 'chart',
+    icon: 'fa-solid fa-sticky-note',
+    visible: false,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return stickyNoteWidgetEdit_component; }).then((c) => c.AXPStickyNoteWidgetEditComponent),
+        },
+    },
+};
+
 class AXPCronJobWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -12190,119 +12144,6 @@ const AXPQrcodeWidget = {
     },
 };
 
-class AXPGaugeChartWidgetEditComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.chartEl = viewChild.required('chart');
-        this.#af = afterNextRender(async () => {
-            await this.loadD3();
-            this.createChart();
-        });
-    }
-    #af;
-    async loadD3() {
-        try {
-            this.d3 = await import('d3');
-        }
-        catch (error) {
-            console.error('Failed to load D3.js:', error);
-        }
-    }
-    createChart() {
-        const chartElement = this.chartEl().nativeElement;
-        this.d3.select(chartElement).selectAll('*').remove();
-        const width = this.getValue().options.width;
-        const height = this.getValue().options.height;
-        const minValue = this.getValue().options.minValue;
-        const maxValue = this.getValue().options.maxValue;
-        const arcThickness = this.getValue().options.arcThickness;
-        const labelOffset = this.getValue().options.labelOffset;
-        const radius = Math.min(width, height) / 2;
-        const arc = this.d3
-            .arc()
-            .innerRadius(radius - arcThickness)
-            .outerRadius(radius)
-            .startAngle(-Math.PI / 2)
-            .endAngle(Math.PI / 2);
-        const scale = this.d3
-            .scaleLinear()
-            .domain([minValue, maxValue])
-            .range([-Math.PI / 2, Math.PI / 2]);
-        const svg = this.d3
-            .select(chartElement)
-            .append('svg')
-            .attr('width', width)
-            .attr('height', height)
-            .attr('role', 'img')
-            .attr('aria-label', 'Gauge chart')
-            .attr('viewBox', `0 0 ${width} ${height}`) // Adjusted viewBox
-            .style('max-width', '100%')
-            .style('height', 'auto')
-            .append('g')
-            .attr('transform', `translate(${width / 2}, ${height / 2})`); // Center the chart
-        const gaugeArc = svg
-            .append('g')
-            .selectAll('path')
-            .data(this.getValue().data)
-            .enter()
-            .append('path')
-            .attr('fill', (d) => d.color || this.getRandomColor())
-            .attr('d', arc);
-        const label = svg
-            .append('text')
-            .attr('text-anchor', 'middle')
-            .attr('font-size', '16px')
-            .attr('y', labelOffset)
-            .text(`${this.getValue().data[0].value}`);
-        const pointer = svg
-            .append('line')
-            .attr('x1', 0)
-            .attr('y1', 0)
-            .attr('x2', 0)
-            .attr('y2', -radius + arcThickness / 2)
-            .attr('stroke', 'black')
-            .attr('stroke-width', 2)
-            .attr('transform', `rotate(${scale(this.getValue().data[0].value) * (180 / Math.PI)})`);
-    }
-    getRandomColor() {
-        // Generate a random hex color
-        return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-    }
-    ngOnDestroy() {
-        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPGaugeChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-justify-center ax-items-center" #chart></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ` <div class="ax-flex ax-justify-center ax-items-center" #chart></div>`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-var gaugeChartWidgetEdit_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPGaugeChartWidgetEditComponent: AXPGaugeChartWidgetEditComponent
-});
-
-const AXPGaugeChartWidget = {
-    name: 'gauge-chart',
-    title: 'Gauge Chart Widget',
-    group: AXP_WIDGETS_CHART_GROUP,
-    type: 'chart',
-    icon: 'fa-solid fa-gauge',
-    visible: false,
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return gaugeChartWidgetEdit_component; }).then((c) => c.AXPGaugeChartWidgetEditComponent),
-        },
-    },
-};
-
 class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -12365,7 +12206,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$6.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$8.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], 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,
@@ -12508,11 +12349,11 @@ const AXPColorBoxWidget = {
     },
 };
 
-class AXPTableEditorWidgetColumnComponent extends AXPColumnWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTableEditorWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTableEditorWidgetColumnComponent, isStandalone: true, selector: "axp-tabular-editor-widget-column", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{ rawValue }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPTabularDataWidgetColumnComponent extends AXPColumnWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataWidgetColumnComponent, isStandalone: true, selector: "axp-tabular-editor-widget-column", 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: AXPTableEditorWidgetColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-tabular-editor-widget-column',
@@ -12523,12 +12364,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-var tableWidgetColumn_component = /*#__PURE__*/Object.freeze({
+var tabularDataColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPTableEditorWidgetColumnComponent: AXPTableEditorWidgetColumnComponent
+    AXPTabularDataWidgetColumnComponent: AXPTabularDataWidgetColumnComponent
 });
 
-class AXPTabularDataEditorWidgetEditComponent extends AXPWidgetComponent {
+class AXPTabularDataWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.columns = computed(() => this.options()['columns']);
@@ -12537,7 +12378,7 @@ class AXPTabularDataEditorWidgetEditComponent extends AXPWidgetComponent {
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-BiCinIok.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-Ba_DdBAl.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : this.columns().length > 3 ? 'lg' : 'md',
             header: true,
@@ -12553,10 +12394,10 @@ class AXPTabularDataEditorWidgetEditComponent extends AXPWidgetComponent {
         });
         this.setValue(popupData.data?.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataEditorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataEditorWidgetEditComponent, isStandalone: true, selector: "axp-tabular-data-editor-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()"> Click To Edit</span> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDataTableModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataWidgetEditComponent, isStandalone: true, selector: "axp-tabular-data-editor-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()"> Click To Edit</span> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDataTableModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataEditorWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-tabular-data-editor-widget',
@@ -12579,14 +12420,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 var tabularDataWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPTabularDataEditorWidgetEditComponent: AXPTabularDataEditorWidgetEditComponent
+    AXPTabularDataWidgetEditComponent: AXPTabularDataWidgetEditComponent
 });
 
-class AXPTextBoxWidgetFilterComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTextBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPTabulaDataWidgetFilterComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabulaDataWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabulaDataWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTextBoxWidgetFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabulaDataWidgetFilterComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -12596,16 +12437,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-var tableWidgetFilter_component = /*#__PURE__*/Object.freeze({
+var tabularDataFilter_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPTextBoxWidgetFilterComponent: AXPTextBoxWidgetFilterComponent
+    AXPTabulaDataWidgetFilterComponent: AXPTabulaDataWidgetFilterComponent
 });
 
-class AXPTableEditorWidgetPrintComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTableEditorWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTableEditorWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class AXPTabularDataWidgetPrintComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataWidgetPrintComponent, 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: AXPTableEditorWidgetPrintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -12615,9 +12456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-var tableWidgetPrint_component = /*#__PURE__*/Object.freeze({
+var tabularDataWidgetPrint_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPTableEditorWidgetPrintComponent: AXPTableEditorWidgetPrintComponent
+    AXPTabularDataWidgetPrintComponent: AXPTabularDataWidgetPrintComponent
 });
 
 class AXPTabularDataEditorWidgetViewComponent extends AXPWidgetComponent {
@@ -12628,7 +12469,7 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPWidgetComponent {
         this.columns = this.options()['columns'];
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-BaslkAPS.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-Ca6Cwzez.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -12683,19 +12524,19 @@ const AXPTableEditorWidget = {
             component: () => Promise.resolve().then(function () { return tabularDataWidgetView_component; }).then((c) => c.AXPTabularDataEditorWidgetViewComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return tabularDataWidgetEdit_component; }).then((c) => c.AXPTabularDataEditorWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return tabularDataWidgetEdit_component; }).then((c) => c.AXPTabularDataWidgetEditComponent),
         },
         filter: {
-            component: () => Promise.resolve().then(function () { return tableWidgetFilter_component; }).then((c) => c.AXPTextBoxWidgetFilterComponent),
+            component: () => Promise.resolve().then(function () { return tabularDataFilter_component; }).then((c) => c.AXPTabulaDataWidgetFilterComponent),
         },
         column: {
-            component: () => Promise.resolve().then(function () { return tableWidgetColumn_component; }).then((c) => c.AXPTableEditorWidgetColumnComponent),
+            component: () => Promise.resolve().then(function () { return tabularDataColumn_component; }).then((c) => c.AXPTabularDataWidgetColumnComponent),
         },
         print: {
-            component: () => Promise.resolve().then(function () { return tableWidgetPrint_component; }).then((c) => c.AXPTableEditorWidgetPrintComponent),
+            component: () => Promise.resolve().then(function () { return tabularDataWidgetPrint_component; }).then((c) => c.AXPTabularDataWidgetPrintComponent),
         },
         designer: {
-            component: () => Promise.resolve().then(function () { return tabularDataWidgetEdit_component; }).then((c) => c.AXPTabularDataEditorWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return tabularDataWidgetEdit_component; }).then((c) => c.AXPTabularDataWidgetEditComponent),
         },
     },
     visible: false
@@ -12756,7 +12597,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPWidgetComponent {
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -13022,7 +12863,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPWidgetComponent {
       </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }, { 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", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }, { 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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { 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: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -13112,7 +12953,7 @@ class AXPFilterOperationsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i1$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$3.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$4.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -13204,7 +13045,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPWidgetComponent {
         (selectedOperationChange)="handleOperationChange($event)"
       ></axp-filter-operations>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: AXNumberBoxModule }, { kind: "component", type: i1$3.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNumberFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -13320,7 +13161,7 @@ class AXPSelectFilterWidgetEditComponent extends AXPWidgetComponent {
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSelectFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -13408,7 +13249,7 @@ class AXPStringWidgetFilterComponent extends AXPWidgetComponent {
       </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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: 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: "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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPStringWidgetFilterComponent, decorators: [{
             type: Component,
@@ -13486,7 +13327,7 @@ class AXPFormFieldWidgetViewComponent extends AXPWidgetComponent {
       <ng-container axp-widget-renderer [node]="node" [index]="index" [parentNode]="this" [mode]="this.mode"> </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i2$2.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -13540,7 +13381,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: i2$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$2.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,
@@ -13583,7 +13424,6 @@ const AXPFormFieldWidget = {
     icon: 'fa-solid fa-pen-field',
     properties: [
         AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
         AXP_LABEL_PROPERTY
     ],
     components: {
@@ -14383,6 +14223,7 @@ class AXPWidgetsModule {
                     AXPDonutChartWidget,
                     AXPBarChartWidget,
                     AXPGaugeChartWidget,
+                    AXPStickyNoteWidget,
                 ],
             })] }); }
 }
@@ -14453,6 +14294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 AXPDonutChartWidget,
                                 AXPBarChartWidget,
                                 AXPGaugeChartWidget,
+                                AXPStickyNoteWidget,
                             ],
                         }),
                     ],
@@ -14466,5 +14308,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBarChartWidget, AXPBarChartWidgetEditComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetEditComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetColumnComponent, AXPGalleryWidgetEditComponent, AXPGalleryWidgetFilterComponent, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, 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$1 as AXPTextBoxWidgetFilterComponent, AXPTextBoxWidgetPrintComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetFilterComponent, AXPToggleWidgetPrintComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_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_GROUP, 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, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetPrintComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetPrintComponent, AXPAvatarWidgetViewComponent, AXPBarChartWidget, AXPBarChartWidgetEditComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetEditComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetPrintComponent, AXPContactWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetFilterComponent, AXPDateTimeBoxWidgetPrintComponent, AXPDateTimeBoxWidgetViewComponent, AXPDonutChartWidget, AXPDonutChartWidgetEditComponent, AXPEmailBoxWidget, AXPEmailBoxWidgetColumnComponent, AXPEmailBoxWidgetEditComponent, AXPEmailBoxWidgetFilterComponent, AXPEmailBoxWidgetPrintComponent, AXPEmailBoxWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPFileBoxWidget, AXPFileBoxWidgetColumnComponent, AXPFileBoxWidgetEditComponent, AXPFileBoxWidgetFilterComponent, AXPFileBoxWidgetPrintComponent, AXPFileBoxWidgetViewComponent, AXPFileManagementService, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPGalleryWidget, AXPGalleryWidgetPrintComponent, AXPGalleryWidgetViewComponent, AXPGaugeChartWidget, AXPGaugeChartWidgetEditComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetFilterComponent, AXPLargeTextWidgetPrintComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPLinkWidget, AXPLinkWidgetColumnComponent, AXPLinkWidgetEditComponent, AXPLinkWidgetFilterComponent, AXPLinkWidgetPrintComponent, AXPLinkWidgetViewComponent, AXPMapBoxWidget, AXPMapBoxWidgetEditComponent, AXPMapBoxWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetFilterComponent, AXPNumberBoxWidgetPrintComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetFilterComponent, AXPPasswordBoxWidgetPrintComponent, AXPPasswordBoxWidgetViewComponent, AXPPhoneBoxWidget, AXPPhoneBoxWidgetColumnComponent, AXPPhoneBoxWidgetEditComponent, AXPPhoneBoxWidgetFilterComponent, AXPPhoneBoxWidgetPrintComponent, AXPPhoneBoxWidgetViewComponent, AXPPropertyEditorHelper, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetPrintComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, 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, AXPStickyNoteWidget, AXPStickyNoteWidgetEditComponent, 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_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_ALIGN_CONTENT_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_COL_END_PROPERTY, AXP_LAYOUT_COL_SPAN_PROPERTY, AXP_LAYOUT_COL_START_PROPERTY, AXP_LAYOUT_FLEX_ALIGN_PROPERTY, AXP_LAYOUT_FLEX_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_JUSTIFY_PROPERTY, AXP_LAYOUT_FLEX_PROPERTIES, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_FLEX_WRAP_PROPERTY, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTIES, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_NAME_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_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_GROUP, 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, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, findNonEmptyBreakpoints, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-widgets.mjs.map