@acorex/platform 20.2.4-next.3 → 20.2.4-next.6

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,6 +1,6 @@
 import * as i1$6 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXPLayoutWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY, AXPColumnWidgetComponent, AXPLayoutBuilderModule, createNumberProperty, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY } from '@acorex/platform/layout/builder';
-import { objectKeyValueTransforms, AXPDataGenerator, AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import { objectKeyValueTransforms, setSmart, AXPDataGenerator, AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import * as i1$5 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
@@ -1205,7 +1205,7 @@ const AXPCheckBoxWidget = {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-BNBOATPB.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
+            component: () => import('./acorex-platform-widgets-checkbox-widget-column.component-DeKpl0uK.mjs').then((c) => c.AXPCheckBoxWidgetColumnComponent),
         },
         filter: {
             component: () => Promise.resolve().then(function () { return checkboxWidgetEdit_component; }).then((c) => c.AXPCheckBoxWidgetEditComponent),
@@ -1584,7 +1584,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-select-box>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: i1$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: i1$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -2488,7 +2488,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPValueWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i1$3.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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$3.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: "20.1.6", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3475,7 +3475,7 @@ class AXPLinkWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-select-box>
       }
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: i1$3.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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: i1$3.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: "20.1.6", ngImport: i0, type: AXPLinkWidgetEditComponent, decorators: [{
             type: Component,
@@ -3920,8 +3920,9 @@ class AXPNumberBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         super(...arguments);
         this.formatService = inject(AXFormatService);
         this.value = computed(() => {
-            if (!isNumber(this.rawValue))
-                return '---';
+            if (!isNumber(this.rawValue)) {
+                return this.nullText;
+            }
             const value = Number(this.rawValue);
             if (this.options['format'] && this.options['format']['name']) {
                 const { name, options } = this.options['format'];
@@ -4536,7 +4537,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i1$3.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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$3.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: "20.1.6", ngImport: i0, type: AXPPhoneBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5183,8 +5184,17 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         //
         this.widgetsConfigs = inject(STRATEGY_CONFIG_TOKEN);
         this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        //#region ----   Expose & Options   ----
+        /**
+         * Expose configuration similar to lookup widget. Can be:
+         * - string path(s): 'field.path'
+         * - mapping objects: { source: 'field.path', target: 'context.target.path' }
+         */
+        this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
+        //#endregion
         this.multiple = computed(() => this.options()['multiple'], ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false, ...(ngDevMode ? [{ debugName: "allowSearch" }] : []));
@@ -5213,6 +5223,26 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     handleValueChange(e) {
         this.selectedItems.set(e.component.selectedItems);
         if (e.isUserInteraction) {
+            //#region ----   Expose extra values to context   ----
+            if (this.expose()) {
+                const selections = this.selectedItems();
+                const exposeList = Array.isArray(this.expose()) ? this.expose() : [this.expose()];
+                const itemToExpose = {};
+                exposeList.forEach((expr) => {
+                    if (typeof expr === 'string') {
+                        const values = selections.map((item) => set({}, expr, get(item, expr)));
+                        setSmart(itemToExpose, expr, this.singleOrMultiple(values));
+                    }
+                    else if (expr && typeof expr === 'object') {
+                        const values = this.multiple()
+                            ? selections.map((item) => set({}, expr.source, get(item, expr.source)))
+                            : selections.map((item) => get(item, expr.source));
+                        setSmart(itemToExpose, expr.target, this.singleOrMultiple(values));
+                    }
+                });
+                this.contextService.patch(itemToExpose);
+            }
+            //#endregion
             if (this.widgetsConfigs.selectValueStrategy === 'valueField') {
                 this.setValue(e.value);
             }
@@ -5245,8 +5275,16 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         cls[`ax-flex-1`] = true;
         return cls;
     }
+    //#region ----   Utility Methods   ----
+    /**
+     * Return a single value for single-select, or the full list for multi-select
+     */
+    singleOrMultiple(values) {
+        return this.multiple() ? values : values[0];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectBoxWidgetEditComponent, isStandalone: true, selector: "axp-select-box-widget-edit", host: { properties: { "class": "this.__class" } }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+  @if(isReady()) {
     <ax-select-box
       [placeholder]="placeholder()"
       [dataSource]="dataSource()"
@@ -5254,6 +5292,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       [valueField]="valueField()"
       [textField]="textField()"
       [multiple]="multiple()"
+      [readonly]="readonly()"
       [ngModel]="getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -5271,13 +5310,15 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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: "20.1.6", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-select-box-widget-edit',
                     template: `
+  @if(isReady()) {
     <ax-select-box
       [placeholder]="placeholder()"
       [dataSource]="dataSource()"
@@ -5285,6 +5326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       [valueField]="valueField()"
       [textField]="textField()"
       [multiple]="multiple()"
+      [readonly]="readonly()"
       [ngModel]="getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -5302,6 +5344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         ></ax-validation-rule>
       }
     </ax-select-box>
+  }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule, AXSelectBoxModule, AXFormModule, AXDecoratorModule, AXSearchBoxModule],
@@ -5425,6 +5468,7 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
         this.items = computed(() => this.options()['items'], ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.valueField = computed(() => this.options()['valueField'], ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.textField = computed(() => this.options()['textField'], ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.imageMode = computed(() => this.options()['imageMode'], ...(ngDevMode ? [{ debugName: "imageMode" }] : []));
         this.internalValue = computed(() => {
             return this.items().filter((item) => {
                 if (Array.isArray(this.getValue()))
@@ -5444,9 +5488,12 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectionListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectionListWidgetViewComponent, isStandalone: true, selector: "axp-selection-list-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
-    }
-    @empty {
+      @if (imageMode()) {
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[this.textField()]" />
+      } @else {
+        <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]"></ax-badge>
+      }
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -5457,14 +5504,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-selection-list-widget-view',
                     template: `
     @for (item of internalValue(); track $index) {
-    <ax-badge  class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]" ></ax-badge>
-    }
-    @empty {
+      @if (imageMode()) {
+        <img class="ax-w-14 ax-h-14 ax-rounded-sm" [src]="item[this.textField()]" />
+      } @else {
+        <ax-badge class="ax-p-0.5" [color]="'surface'" [text]="item[this.textField()]"></ax-badge>
+      }
+    } @empty {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXBadgeModule]
+                    imports: [AXBadgeModule],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -5579,7 +5629,6 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         }, ...(ngDevMode ? [{ debugName: "ef" }] : []));
     }
     handleValueChange(e) {
-        debugger;
         if (e.isUserInteraction) {
             this.setValue(e.value);
         }
@@ -5695,6 +5744,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.textField = this.options['textField'];
         this.items = this.options['items'];
         this.multiple = this.options['multiple'];
+        this.imageMode = this.options['imageMode'];
         this.selectedItemIds = computed(() => {
             return this.rawValue || [];
         }, ...(ngDevMode ? [{ debugName: "selectedItemIds" }] : []));
@@ -5714,10 +5764,20 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPSelectionListWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
-    @if(multiple){ @for (item of selectedItems(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    } }@else {
-    <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+    @if (multiple) {
+      @for (item of selectedItems(); track $index) {
+        @if (imageMode) {
+          <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="item[this.textField]" />
+        } @else {
+          <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+        }
+      }
+    } @else {
+      @if (imageMode) {
+        <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="firstItem()[this.textField]" />
+      } @else {
+        <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+      }
     }
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5725,15 +5785,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             type: Component,
             args: [{
                     template: ` <div class="ax-flex ax-gap-2">
-    @if(multiple){ @for (item of selectedItems(); track $index) {
-    <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
-    } }@else {
-    <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+    @if (multiple) {
+      @for (item of selectedItems(); track $index) {
+        @if (imageMode) {
+          <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="item[this.textField]" />
+        } @else {
+          <ax-badge [look]="'twotone'" [text]="item[this.textField]" color="primary"></ax-badge>
+        }
+      }
+    } @else {
+      @if (imageMode) {
+        <img class="ax-w-10 ax-h-10 ax-rounded-sm" [src]="firstItem()[this.textField]" />
+      } @else {
+        <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
+      }
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXBadgeModule],
-                    inputs: ['rawValue', 'rowData']
+                    inputs: ['rawValue', 'rowData'],
                 }]
         }] });
 
@@ -6751,56 +6821,110 @@ var toggleWidgetFilter_component = /*#__PURE__*/Object.freeze({
 class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
+        //#region ----   Component Properties   ----
         this.negative = this.options['negative'];
         this.trulyText = this.options['trulyText'];
         this.falsyText = this.options['falsyText'];
-        this.nullText = this.options['nullText'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPToggleWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `@if(rawValue === null || rawValue === undefined){
-    @if(nullText){
-      <span>{{nullText}}</span>
-    }@else {
-      <span>---</span>
-    }
-  }@else if(rawValue){ @if(trulyText){
-    <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText){
-    <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
+    @if (value() == null || value() == undefined) {
+      <!-- Null/Undefined state -->
+      @if (value() != null && value() != undefined) {
+        <span>{{ nullText | translate | async }}</span>
+      } @else {
+        <span>---</span>
+      }
+    } 
+    @else {
+      <!-- True state -->
+      @if(value()==true)
+      {
+        @if (trulyText) {
+          <ax-badge 
+            [text]="(trulyText | translate | async)!" 
+            [color]="negative ? 'danger' : 'success'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else  {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          }
+        }
+      }
+      <!-- False state -->
+      @else 
+      {
+        @if (falsyText) {
+          <ax-badge 
+            [text]="(falsyText | translate | async)!" 
+            [color]="negative ? 'success' : 'danger'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          }
+        }
+      }
+    } 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$5.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `@if(rawValue === null || rawValue === undefined){
-    @if(nullText){
-      <span>{{nullText}}</span>
-    }@else {
-      <span>---</span>
-    }
-  }@else if(rawValue){ @if(trulyText){
-    <ax-badge [text]="trulyText" [color]="negative ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    } } }@else { @if(falsyText){
-    <ax-badge [text]="falsyText" [color]="negative ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
-    }@else { @if(negative){
-    <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
-    }@else {
-    <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
-    } } }`,
+                    template: `
+    @if (value() == null || value() == undefined) {
+      <!-- Null/Undefined state -->
+      @if (value() != null && value() != undefined) {
+        <span>{{ nullText | translate | async }}</span>
+      } @else {
+        <span>---</span>
+      }
+    } 
+    @else {
+      <!-- True state -->
+      @if(value()==true)
+      {
+        @if (trulyText) {
+          <ax-badge 
+            [text]="(trulyText | translate | async)!" 
+            [color]="negative ? 'danger' : 'success'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else  {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          }
+        }
+      }
+      <!-- False state -->
+      @else 
+      {
+        @if (falsyText) {
+          <ax-badge 
+            [text]="(falsyText | translate | async)!" 
+            [color]="negative ? 'success' : 'danger'" 
+            [look]="'twotone'">
+          </ax-badge>
+        } @else {
+          @if (negative) {
+            <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          } @else {
+            <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          }
+        }
+      }
+    } 
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDecoratorModule, AXBadgeModule],
+                    imports: [CommonModule, AXDecoratorModule, AXBadgeModule, AXTranslationModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -11637,7 +11761,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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: AXButtonGroupModule }, { kind: "component", type: i1$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7.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$5.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: "20.1.6", 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: AXButtonGroupModule }, { kind: "component", type: i1$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7.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$5.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: "20.1.6", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -11807,7 +11931,7 @@ class AXPAdvancedGridOptionsWidgetEditComponent extends AXPValueWidgetComponent
         this.selectedAlign.set({ value: align, label: this.findAlignNameById(align) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -12051,7 +12175,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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-24\"\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, '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;--ax-comp-range-slider-size: .15rem !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}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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: i2$1.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.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$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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$7.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: "20.1.6", 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-24\"\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, '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;--ax-comp-range-slider-size: .15rem !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}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "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: i2$1.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.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$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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$7.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], 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: "20.1.6", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -12391,7 +12515,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span> Wrap </span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"ax-flex ax-items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\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\n            class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\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        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            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          >\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\" [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>\n", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{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}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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.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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$5.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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: "20.1.6", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option ax-grid ax-grid-cols-[auto_1fr] ax-pt-2 ax-gap-2 ax-items-center ax-justify-items-start\">\n  <span>Direction</span>\n  <div>\n    <ax-button-group [selection]=\"'single'\">\n      <ax-button-group-item (onClick)=\"setFlexDirection('row')\" [selected]=\"flexDirection() === 'row'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('row-reverse')\" [selected]=\"flexDirection() === 'row-reverse'\"\n        ><ax-prefix\n          ><svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style=\"transform: rotate(180deg)\"\n          >\n            <path\n              d=\"M12.2929 7.00004L9.14645 3.85359L9.85355 3.14648L14.2071 7.50004L9.85355 11.8536L9.14645 11.1465L12.2929 8.00004H3V7.00004H12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setFlexDirection('column')\" [selected]=\"flexDirection() === 'column'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M8.00001 12.2929L4.85356 9.14645L4.14645 9.85355L8.50001 14.2071L12.8536 9.85355L12.1465 9.14645L9.00001 12.2929L9.00001 3H8.00001L8.00001 12.2929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item\n        (onClick)=\"setFlexDirection('column-reverse')\"\n        [selected]=\"flexDirection() === 'column-reverse'\"\n        ><ax-prefix\n          ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M9.00004 3.70721L12.1465 6.85363L12.8536 6.14652L8.50001 1.79297L4.14645 6.14652L4.85356 6.85363L8.00004 3.70715L8.00004 13.0001H9.00004L9.00004 3.70721Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span> Wrap </span>\n  <div>\n    <ax-selection-list\n      [items]=\"['wrap', 'nowrap']\"\n      [value]=\"flexWrap()\"\n      (onValueChanged)=\"setWrapMode($event.value)\"\n      direction=\"horizontal\"\n      [multiple]=\"false\"\n      [showControl]=\"true\"\n      look=\"card\"\n      valueField=\"id\"\n      textField=\"text\"\n    >\n      <ng-template #itemTemplate let-item>\n        <div class=\"ax-flex ax-items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\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\n            class=\"ax-size-auto ax-z-[1] ax-rounded-lg ax-bg-[rgb(30,30,30)] ax-flex-none\"\n            [class]=\"flexDirectionIsColumn() ? '-ax-rotate-90' : ''\"\n          >\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        <div class=\"ax-flex ax-justify-center ax-items-center ax-min-w-5 ax-min-h-5\">\n          <div\n            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          >\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\" [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>\n", styles: [".axp-flex-option ax-range-slider{padding:.25rem!important}.axp-flex-option ax-range-slider .ax-range-slider-handler{width:.75rem!important;height:.75rem!important}.axp-flex-option ax-number-box:not(.ax-exclude) div:first-child{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}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$d.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$d.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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i7.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$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "allDigits", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$5.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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: "20.1.6", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -13925,7 +14049,7 @@ class AXPColorBoxWidgetEditComponent extends AXPValueWidgetComponent {
       <ax-clear-button></ax-clear-button>
       } 
     </ax-color-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$7.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: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$7.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColorBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -14049,7 +14173,7 @@ const AXPColorBoxWidget = {
     ],
     components: {
         designer: {
-            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-pYOQv5g8.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
+            component: () => import('./acorex-platform-widgets-color-box-widget-designer.component-CohkI1w1.mjs').then((c) => c.AXPColorBoxWidgetDesignerComponent),
         },
         view: {
             component: () => Promise.resolve().then(function () { return colorBoxWidgetView_component; }).then((c) => c.AXPColorBoxWidgetViewComponent),
@@ -15187,7 +15311,7 @@ class AXPBooleanFilterWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -15452,7 +15576,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i2$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i2$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -15762,7 +15886,7 @@ class AXPSelectFilterWidgetEditComponent extends AXPDataListWidgetComponent {
         <ax-clear-button></ax-clear-button>
       </ax-select-box>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "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: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPSelectFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -16034,7 +16158,7 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutWidgetComponent {
         this.icon = computed(() => this.options()['icon'] || '', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         this.collapsible = computed(() => this.options()['collapsible'] || false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
         this.isOpen = linkedSignal(() => this.options()['isOpen'] ?? true);
-        this.variant = computed(() => this.options()['variant'] || 'card', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.look = computed(() => this.options()['look'] || 'card', ...(ngDevMode ? [{ debugName: "look" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -16045,11 +16169,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget", usesInheritance: true, ngImport: i0, template: "@switch (variant()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      <legend class=\"legend\" (click)=\"toggleCollapse()\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      <div class=\"legend\" (click)=\"toggleCollapse()\">\n        <div class=\"caption\">\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          @if (description()) {\n            <p class=\"description\">{{ description() | translate | async }}</p>\n          }\n        </div>\n        <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n          @if (collapsible()) {\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          }\n        </div>\n      </div>\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      <legend class=\"legend\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:fit-content;width:100%;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      @if (description()) {\n      <p class=\"description\">{{ description() | translate | async }}</p>\n      }\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:fit-content;width:100%;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule], standalone: true, template: "@switch (variant()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      <legend class=\"legend\" (click)=\"toggleCollapse()\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      <div class=\"legend\" (click)=\"toggleCollapse()\">\n        <div class=\"caption\">\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          @if (description()) {\n            <p class=\"description\">{{ description() | translate | async }}</p>\n          }\n        </div>\n        <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n          @if (collapsible()) {\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          }\n        </div>\n      </div>\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      <legend class=\"legend\">\n        @if (icon()) {\n          <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n        }\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      </legend>\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\">\n          @if (description()) {\n            <p class=\"description\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- End of switch-->\n}\n", styles: [":host{display:block;height:fit-content;width:100%;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"] }]
+            args: [{ selector: 'axp-fieldset-widget', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- Card Style -->\n@case ('card') {\n<div class=\"card\">\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <h3 class=\"title\">{{ title() | translate | async }}</h3>\n      @if (description()) {\n      <p class=\"description\">{{ description() | translate | async }}</p>\n      }\n    </div>\n    <div class=\"icon\" [ngClass]=\"{ 'ax-transform ax-rotate-180': isOpen() }\">\n      @if (collapsible()) {\n      <i class=\"fa-solid fa-chevron-down\"></i>\n      }\n    </div>\n  </div>\n\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</div>\n}\n<!-- Group Line style -->\n@case ('group') {\n<fieldset class=\"group\">\n  <legend class=\"legend\">\n    @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    }\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </legend>\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\">\n    @if (description()) {\n    <p class=\"description\">\n      {{ description() | translate | async }}\n    </p>\n    }\n    <!-- render widgets -->\n    @for (node of children(); track $index) {\n    <ng-container axp-widget-renderer [node]=\"node\" [index]=\"index\" [parentNode]=\"this\"\n      [mode]=\"node.mode ?? this.mode\"></ng-container>\n    }\n  </div>\n  }\n</fieldset>\n}\n<!-- End of switch-->\n}", styles: [":host{display:block;height:fit-content;width:100%;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset{border-radius:.375rem;border-width:1px;padding:.5rem 1.5rem 1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{border-top-width:2px;padding-left:1rem;padding-right:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .legend{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .group .content{margin-left:-1rem;margin-right:-1rem;padding-top:.5rem}:host .group .content .description{padding-top:.25rem;padding-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .card{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}:host .card .legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.25rem}:host .card .legend .caption{display:flex;flex-direction:column}:host .card .legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host .card .legend .caption .description{width:100%;font-size:.75rem;line-height:1rem;opacity:.65}:host .card .legend .icon{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:host .card .content{border-top-width:1px;padding:1.25rem}\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -16554,6 +16678,7 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
         this.colSpan = computed(() => this.options()['colSpan'], ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
         this.colStart = computed(() => this.options()['colStart'], ...(ngDevMode ? [{ debugName: "colStart" }] : []));
         this.colEnd = computed(() => this.options()['colEnd'], ...(ngDevMode ? [{ debugName: "colEnd" }] : []));
+        this.hidden = computed(() => this.options()['hidden'], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
         this.flexAlignItems = computed(() => this.options()['flexAlignItems']?.id, ...(ngDevMode ? [{ debugName: "flexAlignItems" }] : []));
         this.flexJustifyContent = computed(() => this.options()['flexJustifyContent']?.id, ...(ngDevMode ? [{ debugName: "flexJustifyContent" }] : []));
         this.flexWrap = computed(() => this.options()['flexWrap']?.id, ...(ngDevMode ? [{ debugName: "flexWrap" }] : []));
@@ -16583,6 +16708,7 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
             cls[`lg:ax-col-start-${this.colStart()}`] = true;
         if (this.colEnd() != null)
             cls[`lg:ax-col-end-${this.colEnd()}`] = true;
+        cls[`ax-hidden`] = this.hidden();
         return cls;
     }
     get __style() {
@@ -16608,8 +16734,10 @@ class AXPGridItemWidgetViewComponent extends AXPLayoutWidgetComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
-      </ng-container>
+      @if (!this.hidden()) {
+        <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+        </ng-container>
+      }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i1$6.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -16619,8 +16747,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-grid-layout-item-widget',
                     template: `
     @for (child of children(); track $index) {
-      <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
-      </ng-container>
+      @if (!this.hidden()) {
+        <ng-container axp-widget-renderer [node]="child" [index]="index" [parentNode]="this" [mode]="this.mode">
+        </ng-container>
+      }
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,