@acorex/platform 20.6.0-next.10 → 20.6.0-next.12

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -1,6 +1,6 @@
 import * as i1$5 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty, AXPColumnWidgetComponent, AXPLayoutBaseWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_ACTION_CATEGORY, AXPValueWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY, AXPWidgetCoreModule, AXPDataListWidgetComponent, AXPWidgetStatus, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXPPropertyEditorHelper, AXPBlockBaseLayoutWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, findNonEmptyBreakpoints, AXPGridItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent } from '@acorex/platform/layout/widget-core';
-import { objectKeyValueTransforms, AXPColorPaletteService, extractValue, setSmart, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator } from '@acorex/platform/core';
+import { objectKeyValueTransforms, AXPColorPaletteService, extractValue, setSmart, AXPTagService, AXPExpressionEvaluatorService, AXPHookService, AXPDataGenerator, AXPStatusDefinitionProviderService } from '@acorex/platform/core';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource, convertArrayToDataSource } from '@acorex/cdk/common';
 import * as i1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -9,10 +9,12 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { computed, ChangeDetectionStrategy, Component, EventEmitter, HostBinding, inject, signal, effect, linkedSignal, InjectionToken, Injectable, ViewEncapsulation, viewChild, untracked, model, output, input, ChangeDetectorRef, afterNextRender, ViewChild, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
-import * as i1$2 from '@acorex/components/badge';
+import { computed, ChangeDetectionStrategy, Component, EventEmitter, HostBinding, inject, signal, effect, linkedSignal, InjectionToken, Injectable, ViewEncapsulation, viewChild, untracked, model, output, input, ChangeDetectorRef, afterNextRender, ViewChild, Input, ElementRef, afterEveryRender, NgZone, importProvidersFrom, NgModule } from '@angular/core';
+import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i1$1 from '@acorex/components/check-box';
+import * as i1$1 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i1$2 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3 from '@acorex/components/label';
 import { AXLabelModule, AXLabelComponent } from '@acorex/components/label';
@@ -25,19 +27,17 @@ import { AXColorUtil } from '@acorex/core/utils';
 import { AXPClipBoardService, AXPSettingService, AXPFilterOperatorMiddlewareService, AXPCleanNestedFilters, AXPFileStorageService, AXPFileTypeProviderService, AXPCommonSettings, ALL_DEFAULT_OPERATORS, DATE_OPERATORS, BOOLEAN_OPERATORS, NUMBER_OPERATORS, STRING_OPERATORS } from '@acorex/platform/common';
 import * as i2$3 from '@acorex/components/color-box';
 import { AXColorBoxModule } from '@acorex/components/color-box';
-import { AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPDynamicFormDesignerComponent, AXPStateMessageComponent, AXPComponentSlotModule, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
-import * as i2$4 from '@acorex/components/select-box';
+import { AXPColorPalettePickerComponent, AXPDragDropListComponent, AXPColumnItemListComponent, AXPImageEditorService, AXPDynamicFormDesignerComponent, AXPStateMessageComponent, AXPComponentSlotModule, AXPWidgetFieldConfiguratorComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryColumnsComponent } from '@acorex/platform/layout/components';
+import * as i3$2 from '@acorex/components/select-box';
 import { AXSelectBoxModule, AXSelectBoxComponent } from '@acorex/components/select-box';
 import * as i1$4 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
-import * as i1$3 from '@angular/common';
-import { CommonModule, AsyncPipe } from '@angular/common';
 import { isNull, isEmpty, set, isNumber, castArray, isNil, get, isEqual, cloneDeep } from 'lodash-es';
 import { AXFormatService } from '@acorex/core/format';
-import * as i3$2 from '@acorex/components/datetime-box';
+import * as i3$3 from '@acorex/components/datetime-box';
 import { AXDateTimeBoxModule } from '@acorex/components/datetime-box';
 import { AXSafePipe } from '@acorex/core/pipes';
 import { AXPlatform } from '@acorex/core/platform';
@@ -46,28 +46,28 @@ import { AXPopupService } from '@acorex/components/popup';
 import * as i4 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i3$3 from '@acorex/components/tabs';
+import * as i3$4 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import * as i1$6 from '@acorex/components/number-box';
 import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i3$4 from '@acorex/components/password-box';
+import * as i3$5 from '@acorex/components/password-box';
 import { AXPasswordBoxModule } from '@acorex/components/password-box';
-import * as i2$5 from '@acorex/components/wysiwyg';
+import * as i2$4 from '@acorex/components/wysiwyg';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
-import * as i4$1 from '@acorex/components/search-box';
+import * as i5 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i2$6 from '@acorex/components/selection-list';
+import * as i2$5 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { first } from 'rxjs';
-import * as i2$7 from '@acorex/components/autocomplete';
+import * as i2$6 from '@acorex/components/autocomplete';
 import { AXAutocompleteModule } from '@acorex/components/autocomplete';
 import * as i1$7 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import * as i1$8 from '@acorex/components/chips';
 import { AXChipsModule } from '@acorex/components/chips';
-import * as i5 from '@acorex/components/dropdown';
+import * as i5$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i2$8 from '@acorex/components/switch';
+import * as i2$7 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { AXFileService } from '@acorex/core/file';
 import * as i1$9 from '@acorex/components/data-table';
@@ -83,7 +83,7 @@ import * as i1$c from '@acorex/components/map';
 import { AXMapModule } from '@acorex/components/map';
 import * as i1$d from '@acorex/components/qrcode';
 import { AXQrcodeModule } from '@acorex/components/qrcode';
-import * as i3$5 from '@acorex/components/popover';
+import * as i3$6 from '@acorex/components/popover';
 import { AXPopoverModule, AXPopoverComponent } from '@acorex/components/popover';
 import { AXSchedulerPickerService, AXSchedulerPickerComponent } from '@acorex/components/scheduler-picker';
 import * as i1$e from '@acorex/components/grid-layout-builder';
@@ -101,7 +101,7 @@ import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import * as i1$h from '@acorex/components/cron-job';
 import { AXCronJobModule } from '@acorex/components/cron-job';
 import { AXTimeDurationFormatter, AXCalendarService } from '@acorex/core/date-time';
-import * as i3$6 from '@acorex/components/time-duration';
+import * as i3$7 from '@acorex/components/time-duration';
 import { AXTimeDurationModule } from '@acorex/components/time-duration';
 import * as i1$i from '@acorex/components/collapse';
 import { AXCollapseModule } from '@acorex/components/collapse';
@@ -1289,6 +1289,50 @@ const AXPButtonWidget = {
     },
 };
 
+const SEMANTIC_COLOR_CLASS_MAP = {
+    primary: { chip: 'axp-status-chip--primary', icon: 'axp-status-icon--primary' },
+    secondary: { chip: 'axp-status-chip--secondary', icon: 'axp-status-icon--secondary' },
+    success: { chip: 'axp-status-chip--success', icon: 'axp-status-icon--success' },
+    warning: { chip: 'axp-status-chip--warning', icon: 'axp-status-icon--warning' },
+    danger: { chip: 'axp-status-chip--danger', icon: 'axp-status-icon--danger' },
+    info: { chip: 'axp-status-chip--info', icon: 'axp-status-icon--info' },
+    accent1: { chip: 'axp-status-chip--accent1', icon: 'axp-status-icon--accent1' },
+    accent2: { chip: 'axp-status-chip--accent2', icon: 'axp-status-icon--accent2' },
+    accent3: { chip: 'axp-status-chip--accent3', icon: 'axp-status-icon--accent3' },
+    neutral: { chip: 'axp-status-chip--neutral', icon: 'axp-status-icon--neutral' },
+};
+const EXPLICIT_COLOR_PATTERN = /^(#(?:[0-9a-f]{3,8})|(rgb|rgba|hsl|hsla)\s*\(|var\()|^[0-9.]+\s*(deg|turn|rad)/i;
+/**
+ * Resolves the visual representation (class names or inline styles) for
+ * a status color value. Semantic color tokens map to predefined classes,
+ * otherwise falls back to inline styles for custom colors.
+ */
+function resolveStatusVisual(color) {
+    if (!color) {
+        return {};
+    }
+    const normalized = color.trim().toLowerCase();
+    const semantic = SEMANTIC_COLOR_CLASS_MAP[normalized];
+    if (semantic) {
+        return {
+            chipClass: semantic.chip,
+            iconClass: semantic.icon,
+        };
+    }
+    if (!EXPLICIT_COLOR_PATTERN.test(normalized)) {
+        // Treat unknown identifiers as custom CSS color keywords
+        // and fall back to inline styling.
+    }
+    const style = {
+        'background-color': color,
+        color: '#ffffff',
+    };
+    return {
+        chipStyle: style,
+        iconStyle: style,
+    };
+}
+
 class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
@@ -1296,6 +1340,16 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.trulyText = this.options['trulyText'];
         this.falsyText = this.options['falsyText'];
     }
+    getVisual(isTrue) {
+        const semantic = isTrue
+            ? this.negative
+                ? 'danger'
+                : 'success'
+            : this.negative
+                ? 'success'
+                : 'danger';
+        return resolveStatusVisual(semantic);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCheckBoxWidgetColumnComponent, isStandalone: true, selector: "axp-checkbox-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div>
     @if (this.rawValue === null || this.rawValue === undefined) {
@@ -1306,7 +1360,13 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
       }
     } @else if (this.rawValue) {
       @if (trulyText) {
-        <span [class]="negative ? ' ax-text-danger-500' : 'ax-text-success'">{{ trulyText }}</span>
+        @let visual = getVisual(true);
+          <span class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+                [ngClass]="visual.chipClass"
+                [ngStyle]="visual.chipStyle"
+          >
+            {{ trulyText }}
+          </span>
       } @else {
         @if (negative) {
           <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -1316,7 +1376,13 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
       }
     } @else {
       @if (falsyText) {
-        <span [class]="negative ? 'ax-text-success' : ' ax-text-danger-500'">{{ falsyText }}</span>
+        @let visual = getVisual(false);
+        <span class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+              [ngClass]="visual.chipClass"
+              [ngStyle]="visual.chipStyle"
+        >
+          {{ falsyText }}
+        </span>
       } @else {
         @if (negative) {
           <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -1325,7 +1391,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
       }
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -1340,7 +1406,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
     } @else if (this.rawValue) {
       @if (trulyText) {
-        <span [class]="negative ? ' ax-text-danger-500' : 'ax-text-success'">{{ trulyText }}</span>
+        @let visual = getVisual(true);
+          <span class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+                [ngClass]="visual.chipClass"
+                [ngStyle]="visual.chipStyle"
+          >
+            {{ trulyText }}
+          </span>
       } @else {
         @if (negative) {
           <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -1350,7 +1422,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
     } @else {
       @if (falsyText) {
-        <span [class]="negative ? 'ax-text-success' : ' ax-text-danger-500'">{{ falsyText }}</span>
+        @let visual = getVisual(false);
+        <span class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+              [ngClass]="visual.chipClass"
+              [ngStyle]="visual.chipStyle"
+        >
+          {{ falsyText }}
+        </span>
       } @else {
         @if (negative) {
           <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -1361,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDecoratorModule],
+                    imports: [CommonModule, AXDecoratorModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -1391,7 +1469,7 @@ class AXPCheckBoxWidgetDesignerComponent extends AXPValueWidgetComponent {
         <ax-label>{{ label() }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -1443,7 +1521,7 @@ class AXPCheckBoxWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-label>{{ label() }}</ax-label>
       }
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1488,6 +1566,8 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.label = computed(() => this.options()['label'], ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.trueVisual = computed(() => resolveStatusVisual(this.negative() ? 'danger' : 'success'), ...(ngDevMode ? [{ debugName: "trueVisual" }] : []));
+        this.falseVisual = computed(() => resolveStatusVisual(this.negative() ? 'success' : 'danger'), ...(ngDevMode ? [{ debugName: "falseVisual" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCheckBoxWidgetViewComponent, isStandalone: true, selector: "axp-checkbox-widget-view", usesInheritance: true, ngImport: i0, template: `
@@ -1500,7 +1580,14 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       } @else if (this.getValue()) {
         @if (trulyText()) {
-          <span [class]="negative() ? ' ax-text-danger-500' : 'ax-text-success'">{{ trulyText() }}</span>
+          @let visual = trueVisual();
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ trulyText() }}
+          </span>
         } @else {
           @if (negative()) {
             <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -1510,7 +1597,14 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       } @else {
         @if (falsyText()) {
-          <span [class]="negative() ? 'ax-text-success' : ' ax-text-danger-500'">{{ falsyText() }}</span>
+          @let visual = falseVisual();
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ falsyText() }}
+          </span>
         } @else {
           @if (negative()) {
             <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -1520,7 +1614,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCheckBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -1536,7 +1630,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }
       } @else if (this.getValue()) {
         @if (trulyText()) {
-          <span [class]="negative() ? ' ax-text-danger-500' : 'ax-text-success'">{{ trulyText() }}</span>
+          @let visual = trueVisual();
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ trulyText() }}
+          </span>
         } @else {
           @if (negative()) {
             <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -1546,7 +1647,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }
       } @else {
         @if (falsyText()) {
-          <span [class]="negative() ? 'ax-text-success' : ' ax-text-danger-500'">{{ falsyText() }}</span>
+          @let visual = falseVisual();
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ falsyText() }}
+          </span>
         } @else {
           @if (negative()) {
             <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -1558,7 +1666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDecoratorModule],
+                    imports: [CommonModule, AXDecoratorModule],
                 }]
         }] });
 
@@ -1940,7 +2048,7 @@ class AXPColorPaletteWidgetDesignerComponent extends AXPValueWidgetComponent {
     //#endregion
     //#region ----   Event Handlers   ----
     handleColorSelect(color) {
-        this.setValue(color);
+        this.setValue(color ?? null);
     }
     //#endregion
     //#region ----   Private Methods   ----
@@ -1973,7 +2081,7 @@ class AXPColorPaletteWidgetDesignerComponent extends AXPValueWidgetComponent {
       [readonly]="readonly()"
       (colorSelected)="handleColorSelect($event)"
     ></axp-color-palette-picker>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXPColorPalettePickerComponent, selector: "axp-color-palette-picker", inputs: ["colors", "selectedColor", "disabled", "readonly"], outputs: ["colorSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPColorPalettePickerComponent, selector: "axp-color-palette-picker", inputs: ["colors", "selectedColor", "disabled", "readonly", "allowClear"], outputs: ["colorSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -2071,7 +2179,7 @@ class AXPColorPaletteWidgetEditComponent extends AXPValueWidgetComponent {
     //#endregion
     //#region ----   Event Handlers   ----
     handleColorSelect(color) {
-        this.setValue(color);
+        this.setValue(color ?? null);
     }
     //#endregion
     //#region ----   Private Methods   ----
@@ -2103,7 +2211,7 @@ class AXPColorPaletteWidgetEditComponent extends AXPValueWidgetComponent {
       [readonly]="readonly()"
       (colorSelected)="handleColorSelect($event)"
     ></axp-color-palette-picker>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXPColorPalettePickerComponent, selector: "axp-color-palette-picker", inputs: ["colors", "selectedColor", "disabled", "readonly"], outputs: ["colorSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPColorPalettePickerComponent, selector: "axp-color-palette-picker", inputs: ["colors", "selectedColor", "disabled", "readonly", "allowClear"], outputs: ["colorSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPaletteWidgetEditComponent, decorators: [{
             type: Component,
@@ -2353,7 +2461,7 @@ class AXPConnectedListsWidgetViewComponent extends AXPValueWidgetComponent {
     } @empty {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPConnectedListsWidgetViewComponent, decorators: [{
             type: Component,
@@ -2403,7 +2511,7 @@ const AXPConnectedDragDropListsWidget = {
     description: 'Two connected lists with drag and drop transfer',
     icon: 'fa-light fa-arrow-right-arrow-left',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     type: 'editor',
     components: {
@@ -2756,7 +2864,7 @@ class AXPContactWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-select-box>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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", "itemHeight", "maxVisibleItems", "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: i3$1.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$4.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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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: i3$1.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$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPContactWidgetEditComponent, decorators: [{
             type: Component,
@@ -2909,7 +3017,7 @@ class AXPContactWidgetViewComponent extends AXPValueWidgetComponent {
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPContactWidgetViewComponent, decorators: [{
             type: Component,
@@ -3187,7 +3295,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPValueWidgetComponent {
         ></ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3684,7 +3792,7 @@ class AXPSelectLanguagePopup extends AXBasePageComponent {
         this.close(this.values);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectLanguagePopup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-grid ax-grid-cols-12\">\n  <aside class=\"ax-col-span-4 ax-border-r ax-border-gray-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of languageList(); track $index) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"$index.toString()\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"language.context.value?.length ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"ax-font-semibold ax-self-start ax-mb-4\">{{language.title}}</p>\n          <div class=\"ax-flex ax-flex-grow ax-items-center ax-justify-center\">\n            <axp-widgets-container\n              class=\"ax-flex ax-flex-col ax-gap-2 ax-p-4\"\n              [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event,language)\"\n            >\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"ax-col-span-8 ax-p-4 ax-flex ax-flex-col ax-pb-32\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n<ax-footer>\n  <ax-suffix>\n    <ax-button [text]=\"('@general:actions.cancel.title' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button\n      color=\"primary\"\n      [text]=\"('@general:actions.save.title' | translate | async)\"\n      (onClick)=\"onSaveButtonClick()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { 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: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { 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: AXTabsModule }, { kind: "component", type: i3$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i3$3.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSelectLanguagePopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-grid ax-grid-cols-12\">\n  <aside class=\"ax-col-span-4 ax-border-r ax-border-gray-200\">\n    <ax-tabs [content]=\"content\" location=\"end\" look=\"with-line-color\" [fitParent]=\"true\">\n      @for (language of languageList(); track $index) {\n      <ax-tab-item [text]=\"language.title\" [key]=\"$index.toString()\" [(active)]=\"language.active\">\n        <ax-suffix>\n          <ax-badge [color]=\"language.context.value?.length ? 'success' : 'ghost'\"></ax-badge>\n        </ax-suffix>\n        <ax-content>\n          <p class=\"ax-font-semibold ax-self-start ax-mb-4\">{{language.title}}</p>\n          <div class=\"ax-flex ax-flex-grow ax-items-center ax-justify-center\">\n            <axp-widgets-container\n              class=\"ax-flex ax-flex-col ax-gap-2 ax-p-4\"\n              [context]=\"language.context\"\n              (onContextChanged)=\"handleContextChanged($event,language)\"\n            >\n              <ng-container axp-widget-renderer [node]=\"language.node\" [mode]=\"'edit'\"> </ng-container>\n            </axp-widgets-container>\n          </div>\n        </ax-content>\n      </ax-tab-item>\n      }\n    </ax-tabs>\n  </aside>\n  <div class=\"ax-col-span-8 ax-p-4 ax-flex ax-flex-col ax-pb-32\">\n    <ng-template [axTabContent] #content=\"axTabContent\"> </ng-template>\n  </div>\n</div>\n<ax-footer>\n  <ax-suffix>\n    <ax-button [text]=\"('@general:actions.cancel.title' | translate | async)\" (onClick)=\"close()\"></ax-button>\n    <ax-button\n      color=\"primary\"\n      [text]=\"('@general:actions.save.title' | translate | async)\"\n      (onClick)=\"onSaveButtonClick()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { 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: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { 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: AXTabsModule }, { kind: "component", type: i3$4.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3$4.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i3$4.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectLanguagePopup, decorators: [{
             type: Component,
@@ -3796,7 +3904,7 @@ class AXPLargeTextWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: 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: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: 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: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLargeTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -3987,7 +4095,7 @@ class AXPListWidgetViewComponent extends AXPValueWidgetComponent {
     } @empty {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPListWidgetViewComponent, decorators: [{
             type: Component,
@@ -4430,7 +4538,7 @@ class AXPPasswordBoxWidgetEditComponent extends AXPValueWidgetComponent {
         <ax-clear-button></ax-clear-button>
       }
     </ax-password-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: AXPasswordBoxModule }, { kind: "component", type: i3$4.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: AXPasswordBoxModule }, { kind: "component", type: i3$5.AXPasswordBoxComponent, selector: "ax-password-box", inputs: ["readonly", "disabled", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "autoComplete", "showToggleButton", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPasswordBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -4758,7 +4866,7 @@ class AXPRichTextWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ 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: AXWysiwygModule }, { kind: "component", type: i2$5.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$5.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$5.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$5.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$5.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$5.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$5.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$5.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$5.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ax-wysiwyg-container>`, isInline: true, dependencies: [{ 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: AXWysiwygModule }, { kind: "component", type: i2$4.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "placeHolder"], outputs: ["onValueChanged"] }, { kind: "component", type: i2$4.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i2$4.AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment" }, { kind: "component", type: i2$4.AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors" }, { kind: "component", type: i2$4.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i2$4.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i2$4.AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert" }, { kind: "component", type: i2$4.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i2$4.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPRichTextWidgetEditComponent, decorators: [{
             type: Component,
@@ -4942,6 +5050,7 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.valueField = this.options['valueField'] ?? 'id';
         this.textField = this.options['textField'] ?? 'title';
         this.badgeClass = this.options['badgeClass'] ?? 'ax-accent1';
+        this.dataSource = this.options['dataSource'] ?? [];
         this.internalValue = computed(() => castArray(this.rawValue)
             .map((item) => this.extractItem(item))
             .filter((c) => c != null), ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
@@ -4950,24 +5059,39 @@ class AXPSelectBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         if (isNil(item)) {
             return null;
         }
-        return typeof item == 'object'
-            ? {
+        // Check if dataSource contains objects
+        const isDataSourceObjects = Array.isArray(this.dataSource) && this.dataSource.length > 0 && typeof this.dataSource[0] === 'object';
+        // If item is primitive and dataSource contains objects, lookup the item in dataSource
+        if (typeof item !== 'object' && isDataSourceObjects) {
+            const foundItem = this.dataSource.find((ds) => ds[this.valueField] === item);
+            if (foundItem) {
+                return {
+                    [this.valueField]: foundItem[this.valueField],
+                    [this.textField]: foundItem[this.textField],
+                };
+            }
+        }
+        // If item is already an object
+        if (typeof item === 'object') {
+            return {
                 [this.valueField]: item?.[this.valueField],
                 [this.textField]: item?.[this.textField],
-            }
-            : {
-                [this.valueField]: item,
-                [this.textField]: item,
             };
+        }
+        // Fallback for primitive values when dataSource is not objects
+        return {
+            [this.valueField]: item,
+            [this.textField]: item,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSelectBoxWidgetColumnComponent, isStandalone: true, selector: "axp-select-box-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-      <ax-badge [text]="item[this.textField]" [class]="badgeClass"></ax-badge>
+      <span >{{item[this.textField] | translate | async}}</span>
     } @empty {
       <span class="ax-text-muted">---</span>
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -4975,13 +5099,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     selector: 'axp-select-box-widget-column',
                     template: ` <div class="ax-flex ax-gap-2">
     @for (item of internalValue(); track $index) {
-      <ax-badge [text]="item[this.textField]" [class]="badgeClass"></ax-badge>
+      <span >{{item[this.textField] | translate | async}}</span>
     } @empty {
       <span class="ax-text-muted">---</span>
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXBadgeModule],
+                    imports: [CommonModule, AXTranslationModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -5022,23 +5146,18 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false, ...(ngDevMode ? [{ debugName: "allowSearch" }] : []));
         this.filter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "filter" }] : []));
-        //#region ----   Filtering Helpers   ----
-        /**
-         * Holds the filter generated by the search box to merge with configured filters.
-         */
-        this.searchFilter = signal(null, ...(ngDevMode ? [{ debugName: "searchFilter" }] : []));
-        this.#baseFilterEffect = effect(() => {
-            const baseFilter = this.filter();
-            const textFilter = untracked(() => this.searchFilter());
-            this.applyFilters(baseFilter, textFilter, 'component');
-        }, ...(ngDevMode ? [{ debugName: "#baseFilterEffect" }] : []));
-        this.#searchFilterEffect = effect(() => {
-            const searchFilter = this.searchFilter();
-            const baseFilter = untracked(() => this.filter());
-            this.applyFilters(baseFilter, searchFilter, 'dataSource');
-        }, ...(ngDevMode ? [{ debugName: "#searchFilterEffect" }] : []));
+        this.searchValue = signal(undefined, ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+        this.#effect = effect(() => {
+            if (this.filter()) {
+                const cleanedFilters = AXPCleanNestedFilters([this.filter()]);
+                if (cleanedFilters.length > 0) {
+                    untracked(() => {
+                        this.dataSource()?.filter(this.filterOperatorMiddleware.transformFilter(cleanedFilters[0]));
+                    });
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
     }
-    //#endregion
     outputs() {
         return [
             {
@@ -5051,23 +5170,6 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             },
         ];
     }
-    handleSearchValueChange(e) {
-        if (!e) {
-            return;
-        }
-        const normalizedValue = typeof e.value === 'string' ? e.value.trim() : e.value === undefined ? undefined : String(e.value);
-        if (normalizedValue === undefined || normalizedValue === null || normalizedValue === '') {
-            this.searchFilter.set(null);
-            return;
-        }
-        this.searchFilter.set({
-            field: this.textField(),
-            operator: {
-                type: 'contains',
-            },
-            value: normalizedValue,
-        });
-    }
     handleValueChange(e) {
         this.selectedItems.set(e.component.selectedItems);
         if (e.isUserInteraction) {
@@ -5104,10 +5206,38 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
             }
         }
     }
-    #baseFilterEffect;
-    #searchFilterEffect;
+    handleSearchValueChange(e) {
+        if (e.isUserInteraction) {
+            this.searchValue.set(e.value);
+            const searchFilter = this.filterOperatorMiddleware.transformFilter({
+                field: this.textField(),
+                operator: { type: 'contains' },
+                value: e.value,
+            });
+            const baseFilter = this.filter() ? AXPCleanNestedFilters([this.filter()])[0] : null;
+            let mergedFilter = searchFilter;
+            if (baseFilter) {
+                if (this.searchValue() !== undefined) {
+                    mergedFilter = {
+                        logic: 'and',
+                        filters: [baseFilter, searchFilter],
+                    };
+                }
+                else {
+                    mergedFilter = baseFilter;
+                }
+            }
+            else if (this.searchValue() === undefined) {
+                mergedFilter = {};
+            }
+            this.dataSource()?.filter(mergedFilter);
+            this.dataSource()?.refresh();
+        }
+    }
+    #effect;
     refresh() {
         setTimeout(() => {
+            this.searchValue.set(undefined);
             this.selectBox()?.refresh();
         }, 0);
     }
@@ -5131,54 +5261,6 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
     singleOrMultiple(values) {
         return this.multiple() ? values : values[0];
     }
-    /**
-     * Applies merged filters to the data source and triggers appropriate refresh behavior.
-     */
-    applyFilters(baseFilter, textFilter, refreshTarget) {
-        const dataSource = this.dataSource();
-        if (!dataSource) {
-            return;
-        }
-        const mergedFilter = this.mergeFilters(baseFilter, textFilter);
-        if (mergedFilter) {
-            dataSource.filter(this.filterOperatorMiddleware.transformFilter(mergedFilter));
-        }
-        else if (typeof dataSource.clearFilter === 'function') {
-            dataSource.clearFilter();
-        }
-        else {
-            dataSource.filter(undefined);
-        }
-        if (refreshTarget === 'component') {
-            this.refresh();
-        }
-        else if (refreshTarget === 'dataSource') {
-            const ds = dataSource;
-            if (typeof ds.refresh === 'function') {
-                ds.refresh();
-            }
-        }
-    }
-    /**
-     * Merges provided filters using logical AND while cleaning invalid entries.
-     */
-    mergeFilters(...filters) {
-        const validFilters = filters.filter(Boolean);
-        if (!validFilters.length) {
-            return null;
-        }
-        const cleanedFilters = AXPCleanNestedFilters(validFilters);
-        if (cleanedFilters.length === 0) {
-            return null;
-        }
-        if (cleanedFilters.length === 1) {
-            return cleanedFilters[0];
-        }
-        return {
-            logic: 'and',
-            filters: cleanedFilters,
-        };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: `
     <ax-select-box
@@ -5194,7 +5276,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       (onValueChanged)="handleValueChange($event)"
     >
       @if (allowSearch()) {
-        <ax-search-box [autoSearch]="false" (onValueChanged)="handleSearchValueChange($event)"
+        <ax-search-box [autoSearch]="false" [ngModel]="searchValue()" (onValueChanged)="handleSearchValueChange($event)"
           ><ax-clear-button></ax-clear-button
         ></ax-search-box>
       }
@@ -5209,7 +5291,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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", "itemHeight", "maxVisibleItems", "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: i3$1.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: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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: i3$1.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.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -5229,7 +5311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       (onValueChanged)="handleValueChange($event)"
     >
       @if (allowSearch()) {
-        <ax-search-box [autoSearch]="false" (onValueChanged)="handleSearchValueChange($event)"
+        <ax-search-box [autoSearch]="false" [ngModel]="searchValue()" (onValueChanged)="handleSearchValueChange($event)"
           ><ax-clear-button></ax-clear-button
         ></ax-search-box>
       }
@@ -5259,10 +5341,8 @@ var selectBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPSelectBoxWidgetViewComponent extends AXPDataListWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.badgeClass = computed(() => this.options()['badgeClass'] ?? 'ax-accent1', ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
-    }
+    //TODO: why do we need this?
+    //protected badgeClass = computed<string>(() => (this.options()['badgeClass'] as string) ?? 'ax-accent1');
     get __class() {
         const cls = {};
         cls[`ax-flex`] = true;
@@ -5272,12 +5352,12 @@ class AXPSelectBoxWidgetViewComponent extends AXPDataListWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSelectBoxWidgetViewComponent, isStandalone: true, selector: "axp-select-box-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @for (item of selectedItems(); track $index) {
-    <ax-badge class="ax-p-0.5 {{badgeClass()}}"  [text]="item[textField()]" ></ax-badge>
+    <span >{{item[this.textField()] | translate | async}}</span>
     }
     @empty {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -5285,14 +5365,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     selector: 'axp-select-box-widget-view',
                     template: `
     @for (item of selectedItems(); track $index) {
-    <ax-badge class="ax-p-0.5 {{badgeClass()}}"  [text]="item[textField()]" ></ax-badge>
+    <span >{{item[this.textField()] | translate | async}}</span>
     }
     @empty {
       <span class="ax-text-muted">---</span>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXBadgeModule],
+                    imports: [AXBadgeModule, CommonModule, AXTranslationModule],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -5381,7 +5461,7 @@ class AXPSelectionListWidgetColumnComponent extends AXPColumnWidgetComponent {
         <ax-badge [look]="'twotone'" [text]="firstItem()[this.textField]" color="primary"></ax-badge>
       }
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectionListWidgetColumnComponent, decorators: [{
             type: Component,
@@ -5463,7 +5543,7 @@ class AXPSelectionListWidgetDesignerComponent extends AXPDataListWidgetComponent
       [readonly]="readonly()"
     >
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$6.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXFormModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectionListWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -5557,7 +5637,7 @@ class AXPSelectionListWidgetEditComponent extends AXPDataListWidgetComponent {
         ></ax-validation-rule>
       }
     </ax-selection-list>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$6.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectionListWidgetEditComponent, decorators: [{
             type: Component,
@@ -5640,7 +5720,7 @@ class AXPSelectionListWidgetViewComponent extends AXPValueWidgetComponent {
     } @empty {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectionListWidgetViewComponent, decorators: [{
             type: Component,
@@ -5770,6 +5850,10 @@ class AXPTagEditorWidgetColumnComponent extends AXPColumnWidgetComponent {
             [style.background-color]="tag.color || null"
             [style.color]="tag.color ? 'white' : null"
           >
+          <i
+            class="fa-solid fa-tag"
+            [style.color]="tag.color ? 'white' : null"
+          ></i>
             <span>{{ tag.title }}</span>
           </div>
         }
@@ -5792,6 +5876,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             [style.background-color]="tag.color || null"
             [style.color]="tag.color ? 'white' : null"
           >
+          <i
+            class="fa-solid fa-tag"
+            [style.color]="tag.color ? 'white' : null"
+          ></i>
             <span>{{ tag.title }}</span>
           </div>
         }
@@ -5939,6 +6027,10 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
     [style.background-color]="item.color || null"
     [style.color]="item.color ? 'white' : null"
   >
+  <i
+      class="fa-solid fa-tag"
+      [style.color]="item.color ? 'white' : null"
+    ></i>
     <span>{{ item.title }}</span>
     <button (click)="tagBoxComponent.removeItem(index)" type="button">
         <ax-icon class="ax-icon ax-icon-close"></ax-icon>
@@ -5949,17 +6041,16 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
   <!-- Custom Autocomplete Item Template -->
 <ng-template #itemTemplate let-context>
   @let item = context.data;
-  <div
-    class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 "
-  >
-    <div
-      class="ax-flex ax-h-8 ax-w-8 ax-items-center ax-justify-center ax-rounded-full"
-      [style.background-color]="item.color"
-    >
-    </div>
+  <div class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 ">
+    <i
+      class="fa-solid fa-tag ax-text-xl"
+      [style.color]="item.color || null"
+    ></i>
     <div class="ax-flex-1">
       <ax-title>{{ item.title }}</ax-title>
-      <ax-subtitle>{{ item.description }}</ax-subtitle>
+      @if (item.description) {
+        <ax-subtitle>{{ item.description }}</ax-subtitle>
+      }
     </div>
   </div>
 </ng-template>
@@ -5985,7 +6076,7 @@ class AXPTagEditorWidgetEditComponent extends AXPValueWidgetComponent {
     </div>
   </div>
 </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$7.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$7.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "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: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i1$7.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXAutocompleteModule }, { kind: "component", type: i2$6.AXAutocompleteComponent, selector: "ax-autocomplete", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "delayTime", "itemHeight", "maxVisibleItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "listHeaderTemplate", "listFooterTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemClick", "onItemSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "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: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTagEditorWidgetEditComponent, decorators: [{
             type: Component,
@@ -6031,6 +6122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     [style.background-color]="item.color || null"
     [style.color]="item.color ? 'white' : null"
   >
+  <i
+      class="fa-solid fa-tag"
+      [style.color]="item.color ? 'white' : null"
+    ></i>
     <span>{{ item.title }}</span>
     <button (click)="tagBoxComponent.removeItem(index)" type="button">
         <ax-icon class="ax-icon ax-icon-close"></ax-icon>
@@ -6041,17 +6136,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   <!-- Custom Autocomplete Item Template -->
 <ng-template #itemTemplate let-context>
   @let item = context.data;
-  <div
-    class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 "
-  >
-    <div
-      class="ax-flex ax-h-8 ax-w-8 ax-items-center ax-justify-center ax-rounded-full"
-      [style.background-color]="item.color"
-    >
-    </div>
+  <div class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 ">
+    <i
+      class="fa-solid fa-tag ax-text-xl"
+      [style.color]="item.color || null"
+    ></i>
     <div class="ax-flex-1">
       <ax-title>{{ item.title }}</ax-title>
-      <ax-subtitle>{{ item.description }}</ax-subtitle>
+      @if (item.description) {
+        <ax-subtitle>{{ item.description }}</ax-subtitle>
+      }
     </div>
   </div>
 </ng-template>
@@ -6363,7 +6457,7 @@ class AXPTemplateBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6931,92 +7025,122 @@ class AXPToggleWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.trulyText = this.options['trulyText'];
         this.falsyText = this.options['falsyText'];
     }
+    getVisual(isTrue) {
+        const semantic = isTrue
+            ? this.negative
+                ? 'danger'
+                : 'success'
+            : this.negative
+                ? 'success'
+                : 'danger';
+        return resolveStatusVisual(semantic);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPToggleWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "axp-toggle-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: ` <div>
-    @if (this.rawValue === null || this.rawValue === undefined) {
-      @if (nullText) {
-        <span>{{ nullText }}</span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPToggleWidgetColumnComponent, isStandalone: true, selector: "axp-toggle-widget-column", 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 if (this.rawValue) {
-      @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 {
+      <!-- True state -->
+      @if (value() == true) {
+        @if (trulyText) {
+          @let visual = getVisual(true);
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ (trulyText | translate | async)! }}
+          </span>
         } @else {
-          <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          @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 | 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>
+      <!-- False state -->
+      @else {
+        @if (falsyText) {
+          @let visual = getVisual(false);
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ (falsyText | translate | async)! }}
+          </span>
         } @else {
-          <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          @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>
+          }
         }
       }
     }
-  </div>`, 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$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPToggleWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-toggle-widget-column',
-                    template: ` <div>
-    @if (this.rawValue === null || this.rawValue === undefined) {
-      @if (nullText) {
-        <span>{{ nullText }}</span>
+                    template: `
+    @if (value() == null || value() == undefined) {
+      <!-- Null/Undefined state -->
+      @if (value() != null && value() != undefined) {
+        <span>{{ nullText | translate | async }}</span>
       } @else {
         <span>---</span>
       }
-    } @else if (this.rawValue) {
-      @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 {
+      <!-- True state -->
+      @if (value() == true) {
+        @if (trulyText) {
+          @let visual = getVisual(true);
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ (trulyText | translate | async)! }}
+          </span>
         } @else {
-          <ax-icon class="fa-solid fa-check ax-text-success"></ax-icon>
+          @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 | 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>
+      <!-- False state -->
+      @else {
+        @if (falsyText) {
+          @let visual = getVisual(false);
+          <span
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
+          >
+            {{ (falsyText | translate | async)! }}
+          </span>
         } @else {
-          <ax-icon class="fa-solid fa-xmark ax-text-danger-500"></ax-icon>
+          @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>
+          }
         }
       }
     }
-  </div>`,
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule, AXBadgeModule, AXTranslationModule],
+                    imports: [CommonModule, AXDecoratorModule, AXTranslationModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -7052,10 +7176,10 @@ class AXPToggleWidgetEditComponent extends AXPValueWidgetComponent {
       >
       </ax-switch>
       @if (label()) {
-        <ax-label [textContent]="label()"></ax-label>
+        <ax-label [textContent]="label() | translate | async"></ax-label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPToggleWidgetEditComponent, decorators: [{
             type: Component,
@@ -7072,12 +7196,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       >
       </ax-switch>
       @if (label()) {
-        <ax-label [textContent]="label()"></ax-label>
+        <ax-label [textContent]="label() | translate | async"></ax-label>
       }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, AXFormModule, AXSwitchModule, AXValidationModule, AXLabelModule],
+                    imports: [FormsModule, AXFormModule, AXSwitchModule, AXValidationModule, AXLabelModule, AXTranslationModule, AsyncPipe],
                 }]
         }], propDecorators: { __class: [{
                 type: HostBinding,
@@ -7096,6 +7220,8 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
         this.falsyText = computed(() => this.options()['falsyText'], ...(ngDevMode ? [{ debugName: "falsyText" }] : []));
         this.trulyText = computed(() => this.options()['trulyText'], ...(ngDevMode ? [{ debugName: "trulyText" }] : []));
         this.nullText = computed(() => this.options()['nullText'], ...(ngDevMode ? [{ debugName: "nullText" }] : []));
+        this.trueVisual = computed(() => resolveStatusVisual(this.negative() ? 'danger' : 'success'), ...(ngDevMode ? [{ debugName: "trueVisual" }] : []));
+        this.falseVisual = computed(() => resolveStatusVisual(this.negative() ? 'success' : 'danger'), ...(ngDevMode ? [{ debugName: "falseVisual" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPToggleWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-toggle-widget-view", usesInheritance: true, ngImport: i0, template: ` @if (getValue() === null || getValue() === undefined) {
@@ -7106,7 +7232,14 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
       }
     } @else if (getValue()) {
       @if (trulyText()) {
-        <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+        @let visual = trueVisual();
+        <span
+          class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+          [ngClass]="visual.chipClass"
+          [ngStyle]="visual.chipStyle"
+        >
+          {{ trulyText() }}
+        </span>
       } @else {
         @if (negative()) {
           <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -7116,7 +7249,14 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
       }
     } @else {
       @if (falsyText()) {
-        <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+        @let visual = falseVisual();
+        <span
+          class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+          [ngClass]="visual.chipClass"
+          [ngStyle]="visual.chipStyle"
+        >
+          {{ falsyText() }}
+        </span>
       } @else {
         @if (negative()) {
           <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -7124,7 +7264,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
           <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$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -7138,7 +7278,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
     } @else if (getValue()) {
       @if (trulyText()) {
-        <ax-badge [text]="trulyText()" [color]="negative() ? 'danger' : 'success'" [look]="'twotone'"></ax-badge>
+        @let visual = trueVisual();
+        <span
+          class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+          [ngClass]="visual.chipClass"
+          [ngStyle]="visual.chipStyle"
+        >
+          {{ trulyText() }}
+        </span>
       } @else {
         @if (negative()) {
           <ax-icon class="fa-solid fa-xmark  ax-text-danger-500"> </ax-icon>
@@ -7148,7 +7295,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
     } @else {
       @if (falsyText()) {
-        <ax-badge [text]="falsyText()" [color]="negative() ? 'success' : 'danger'" [look]="'twotone'"></ax-badge>
+        @let visual = falseVisual();
+        <span
+          class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium"
+          [ngClass]="visual.chipClass"
+          [ngStyle]="visual.chipStyle"
+        >
+          {{ falsyText() }}
+        </span>
       } @else {
         @if (negative()) {
           <ax-icon class="fa-solid fa-check ax-text-success"> </ax-icon>
@@ -7158,7 +7312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       }
     }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXDecoratorModule, AXBadgeModule],
+                    imports: [CommonModule, AXDecoratorModule],
                 }]
         }] });
 
@@ -7595,7 +7749,7 @@ class AXPAvatarWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["axp-avatar-widget-edit .axp-empty{width:7rem;height:7rem}axp-avatar-widget-edit .axp-empty{cursor:pointer}axp-avatar-widget-edit .axp-empty{border-radius:9999px}axp-avatar-widget-edit .axp-empty{border-width:2px}axp-avatar-widget-edit .axp-empty{border-style:dashed}axp-avatar-widget-edit .axp-empty{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-empty{transition-duration:.5s}axp-avatar-widget-edit .axp-empty{animation-duration:.5s}axp-avatar-widget-edit .axp-empty:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-50),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-empty{display:flex}axp-avatar-widget-edit .axp-empty{flex-direction:column}axp-avatar-widget-edit .axp-empty{align-items:center}axp-avatar-widget-edit .axp-empty{justify-content:center}axp-avatar-widget-edit .axp-empty{gap:.5rem}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem}axp-avatar-widget-edit .axp-content{position:relative}axp-avatar-widget-edit .axp-content{display:flex}axp-avatar-widget-edit .axp-content{width:7rem;height:7rem}axp-avatar-widget-edit .axp-content{overflow:hidden}axp-avatar-widget-edit .axp-content{border-radius:9999px}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%}axp-avatar-widget-edit .axp-content>:first-child{cursor:pointer}axp-avatar-widget-edit .axp-content>:first-child{background-size:cover}axp-avatar-widget-edit .axp-content>:first-child{background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute}axp-avatar-widget-edit .axp-content>:last-child{display:flex}axp-avatar-widget-edit .axp-content>:last-child{display:none}axp-avatar-widget-edit .axp-content>:last-child{height:100%}axp-avatar-widget-edit .axp-content>:last-child{width:100%}axp-avatar-widget-edit .axp-content>:last-child{align-items:center}axp-avatar-widget-edit .axp-content>:last-child{justify-content:center}axp-avatar-widget-edit .axp-content>:last-child{gap:.5rem}axp-avatar-widget-edit .axp-content>:last-child{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-content>:last-child{transition-duration:.5s}axp-avatar-widget-edit .axp-content>:last-child{animation-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex}axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:rgba(0,0,0,.3)}\n"], dependencies: [{ 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.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["axp-avatar-widget-edit .axp-empty{width:7rem;height:7rem}axp-avatar-widget-edit .axp-empty{cursor:pointer}axp-avatar-widget-edit .axp-empty{border-radius:9999px}axp-avatar-widget-edit .axp-empty{border-width:2px}axp-avatar-widget-edit .axp-empty{border-style:dashed}axp-avatar-widget-edit .axp-empty{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-empty{transition-duration:.5s}axp-avatar-widget-edit .axp-empty{animation-duration:.5s}axp-avatar-widget-edit .axp-empty:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-50),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-empty{display:flex}axp-avatar-widget-edit .axp-empty{flex-direction:column}axp-avatar-widget-edit .axp-empty{align-items:center}axp-avatar-widget-edit .axp-empty{justify-content:center}axp-avatar-widget-edit .axp-empty{gap:.5rem}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem}axp-avatar-widget-edit .axp-content{position:relative}axp-avatar-widget-edit .axp-content{display:flex}axp-avatar-widget-edit .axp-content{width:7rem;height:7rem}axp-avatar-widget-edit .axp-content{overflow:hidden}axp-avatar-widget-edit .axp-content{border-radius:9999px}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%}axp-avatar-widget-edit .axp-content>:first-child{cursor:pointer}axp-avatar-widget-edit .axp-content>:first-child{background-size:cover}axp-avatar-widget-edit .axp-content>:first-child{background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute}axp-avatar-widget-edit .axp-content>:last-child{display:flex}axp-avatar-widget-edit .axp-content>:last-child{display:none}axp-avatar-widget-edit .axp-content>:last-child{height:100%}axp-avatar-widget-edit .axp-content>:last-child{width:100%}axp-avatar-widget-edit .axp-content>:last-child{align-items:center}axp-avatar-widget-edit .axp-content>:last-child{justify-content:center}axp-avatar-widget-edit .axp-content>:last-child{gap:.5rem}axp-avatar-widget-edit .axp-content>:last-child{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-content>:last-child{transition-duration:.5s}axp-avatar-widget-edit .axp-content>:last-child{animation-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex}axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:#0000004d}\n"], dependencies: [{ 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.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPAvatarWidgetEditComponent, decorators: [{
             type: Component,
@@ -7629,7 +7783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         </div>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonModule, AXDecoratorModule], styles: ["axp-avatar-widget-edit .axp-empty{width:7rem;height:7rem}axp-avatar-widget-edit .axp-empty{cursor:pointer}axp-avatar-widget-edit .axp-empty{border-radius:9999px}axp-avatar-widget-edit .axp-empty{border-width:2px}axp-avatar-widget-edit .axp-empty{border-style:dashed}axp-avatar-widget-edit .axp-empty{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-empty{transition-duration:.5s}axp-avatar-widget-edit .axp-empty{animation-duration:.5s}axp-avatar-widget-edit .axp-empty:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-50),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-empty{display:flex}axp-avatar-widget-edit .axp-empty{flex-direction:column}axp-avatar-widget-edit .axp-empty{align-items:center}axp-avatar-widget-edit .axp-empty{justify-content:center}axp-avatar-widget-edit .axp-empty{gap:.5rem}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem}axp-avatar-widget-edit .axp-content{position:relative}axp-avatar-widget-edit .axp-content{display:flex}axp-avatar-widget-edit .axp-content{width:7rem;height:7rem}axp-avatar-widget-edit .axp-content{overflow:hidden}axp-avatar-widget-edit .axp-content{border-radius:9999px}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%}axp-avatar-widget-edit .axp-content>:first-child{cursor:pointer}axp-avatar-widget-edit .axp-content>:first-child{background-size:cover}axp-avatar-widget-edit .axp-content>:first-child{background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute}axp-avatar-widget-edit .axp-content>:last-child{display:flex}axp-avatar-widget-edit .axp-content>:last-child{display:none}axp-avatar-widget-edit .axp-content>:last-child{height:100%}axp-avatar-widget-edit .axp-content>:last-child{width:100%}axp-avatar-widget-edit .axp-content>:last-child{align-items:center}axp-avatar-widget-edit .axp-content>:last-child{justify-content:center}axp-avatar-widget-edit .axp-content>:last-child{gap:.5rem}axp-avatar-widget-edit .axp-content>:last-child{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-content>:last-child{transition-duration:.5s}axp-avatar-widget-edit .axp-content>:last-child{animation-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex}axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:rgba(0,0,0,.3)}\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonModule, AXDecoratorModule], styles: ["axp-avatar-widget-edit .axp-empty{width:7rem;height:7rem}axp-avatar-widget-edit .axp-empty{cursor:pointer}axp-avatar-widget-edit .axp-empty{border-radius:9999px}axp-avatar-widget-edit .axp-empty{border-width:2px}axp-avatar-widget-edit .axp-empty{border-style:dashed}axp-avatar-widget-edit .axp-empty{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-primary-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-empty{transition-duration:.5s}axp-avatar-widget-edit .axp-empty{animation-duration:.5s}axp-avatar-widget-edit .axp-empty:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-50),var(--tw-bg-opacity, 1))}axp-avatar-widget-edit .axp-empty{display:flex}axp-avatar-widget-edit .axp-empty{flex-direction:column}axp-avatar-widget-edit .axp-empty{align-items:center}axp-avatar-widget-edit .axp-empty{justify-content:center}axp-avatar-widget-edit .axp-empty{gap:.5rem}axp-avatar-widget-edit .axp-empty.axp-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-danger-surface),var(--tw-border-opacity, 1))}axp-avatar-widget-edit .axp-empty.axp-state-loading{--fa-animation-duration: .7s}axp-avatar-widget-edit .axp-empty.axp-state-loading i{font-size:1.875rem;line-height:2.25rem}axp-avatar-widget-edit .axp-content{position:relative}axp-avatar-widget-edit .axp-content{display:flex}axp-avatar-widget-edit .axp-content{width:7rem;height:7rem}axp-avatar-widget-edit .axp-content{overflow:hidden}axp-avatar-widget-edit .axp-content{border-radius:9999px}axp-avatar-widget-edit .axp-content>:first-child{width:100%;height:100%}axp-avatar-widget-edit .axp-content>:first-child{cursor:pointer}axp-avatar-widget-edit .axp-content>:first-child{background-size:cover}axp-avatar-widget-edit .axp-content>:first-child{background-position:center}axp-avatar-widget-edit .axp-content>:last-child{position:absolute}axp-avatar-widget-edit .axp-content>:last-child{display:flex}axp-avatar-widget-edit .axp-content>:last-child{display:none}axp-avatar-widget-edit .axp-content>:last-child{height:100%}axp-avatar-widget-edit .axp-content>:last-child{width:100%}axp-avatar-widget-edit .axp-content>:last-child{align-items:center}axp-avatar-widget-edit .axp-content>:last-child{justify-content:center}axp-avatar-widget-edit .axp-content>:last-child{gap:.5rem}axp-avatar-widget-edit .axp-content>:last-child{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}axp-avatar-widget-edit .axp-content>:last-child{transition-duration:.5s}axp-avatar-widget-edit .axp-content>:last-child{animation-duration:.5s}axp-avatar-widget-edit .axp-content:hover>:last-child{display:flex}axp-avatar-widget-edit .axp-content:hover>:last-child{background-color:#0000004d}\n"] }]
         }] });
 
 var avatarWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -7745,9 +7899,10 @@ var avatarWidgetView_component = /*#__PURE__*/Object.freeze({
 const AXPAvatarWidget = {
     name: 'avatar',
     title: 'Avatar',
-    icon: 'fa-solid fa-image-user',
+    description: 'Displays an avatar image based on a reference ID and type',
+    icon: 'fa-light fa-image-user',
     categories: AXP_WIDGETS_ADVANCE_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.EntityWidget],
     type: 'editor',
     properties: [
         AXP_NAME_PROPERTY,
@@ -8202,7 +8357,7 @@ const AXPDynamicFormDesignerWidget = {
     icon: 'fa-light fa-list-check',
     description: 'Design and manage dynamic form fields',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     defaultFilterWidgetName: 'string-filter',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
@@ -8425,7 +8580,7 @@ const AXPExtraPropertiesWidget = {
     description: 'Add and manage extra key/value properties using dynamic widgets',
     icon: 'fa-light fa-list-check',
     categories: AXP_WIDGETS_ADVANCE_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
@@ -8445,7 +8600,7 @@ const AXPExtraPropertiesSchemaWidget = {
     description: 'Define fields (type, title, key, options) for extra properties',
     icon: 'fa-light fa-list-ul',
     categories: AXP_WIDGETS_ADVANCE_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
@@ -8464,7 +8619,7 @@ const AXPExtraPropertiesValuesWidget = {
     description: 'Enter values for a defined extra properties schema',
     icon: 'fa-light fa-list-check',
     categories: AXP_WIDGETS_ADVANCE_CATEGORY,
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     type: 'editor',
     properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
     components: {
@@ -8512,8 +8667,22 @@ class AXPEditFileUploaderCommand {
     //#endregion
     //#region ----   Command Execution   ----
     async execute(input) {
-        // Show dialog to edit file details
-        return await this.showEditDialog(input.file, input.plugins ?? [], input.excludePlugins ?? []);
+        try {
+            // Show dialog to edit file details
+            const updatedFile = await this.showEditDialog(input.file, input.plugins ?? [], input.excludePlugins ?? []);
+            return {
+                success: true,
+                data: updatedFile
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                message: {
+                    text: error instanceof Error ? error.message : 'Failed to edit file'
+                }
+            };
+        }
     }
     //#endregion
     //#region ----   Dialog Logic   ----
@@ -9077,7 +9246,6 @@ class AXPFileListComponent {
      */
     async handleFileEdit(event, file) {
         //   if (event instanceof MouseEvent) {
-        debugger;
         event.stopPropagation();
         event.preventDefault();
         // } else {
@@ -9087,11 +9255,15 @@ class AXPFileListComponent {
         if (this.readonly()) {
             return;
         }
-        const newFile = await this.commandExecutor.execute('FileUploader:Edit', {
+        const commandResult = await this.commandExecutor.execute('FileUploader:Edit', {
             file,
             plugins: this.plugins() ?? [],
             excludePlugins: this.excludePlugins() ?? [],
         });
+        if (!commandResult?.success || !commandResult.data) {
+            return;
+        }
+        const newFile = commandResult.data;
         this.onRename.emit(newFile);
         try {
             await this.hooks.runAsync(FileUploaderWebhookKeys.FileItem.AfterEdit, {
@@ -9130,7 +9302,7 @@ class AXPFileListComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFileListComponent, isStandalone: true, selector: "axp-file-list", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fileEditable: { classPropertyName: "fileEditable", publicName: "fileEditable", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, excludePlugins: { classPropertyName: "excludePlugins", publicName: "excludePlugins", isSignal: true, isRequired: false, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove", onRevert: "onRevert", onRename: "onRename" }, providers: [], ngImport: i0, template: "@for (file of displayFiles(); track $index) {\n  <div\n    class=\"__item\"\n    [ngClass]=\"{ '--removed': file.status === 'deleted', '--attached': file.status === 'attached' }\"\n  >\n    <div class=\"__icon\">\n      <i class=\"fa-fw {{ getFileInfo(file.name).icon }} fa-solid\"></i>\n    </div>\n    <div class=\"__name\">{{ file.name }}</div>\n    <div class=\"__actions\">\n      @if (file.status === 'deleted') {\n        <!-- Revert button -->\n        <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"warning\" (onClick)=\"handleFileRevert($event,file)\">\n          <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n        </ax-button>\n      } @else {\n        <!-- All actions from hooks (including default actions) -->\n        @if (!readonly() || (readonly() && file.status === 'attached')) {\n          @for (action of actionsFor(file, $index); track action.id ?? action.textKey ?? action.text ?? $index) {\n            <ax-button\n              [look]=\"'blank'\"\n              class=\"ax-sm\"\n              [color]=\"getActionColor(action)\"\n              (onClick)=\"runAction(action)\"\n            >\n              @if (action.icon) {\n                <ax-icon class=\"{{ action.icon }}\"></ax-icon>\n              }\n            </ax-button>\n          }\n        }\n      }\n    </div>\n  </div>\n} @empty {\n  <div class=\"__empty-state\">\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:widgets.file-uploader.empty-state.title'\"\n      [description]=\"'@general:widgets.file-uploader.empty-state.description'\"\n    >\n    </axp-state-message>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;flex-direction:column;gap:.125rem;padding-top:.5rem;padding-bottom:.5rem}:host .__item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-left-width:4px;border-color:transparent;padding:.5rem}:host .__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host .__item.--removed{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-danger-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-50),var(--tw-bg-opacity, 1))}:host .__item.--attached{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));animation:attached-flash 1s ease-out forwards}:host .__item .__icon{width:1.5rem;flex-shrink:0}:host .__item .__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:.875rem;line-height:1.25rem;font-weight:500}:host .__item .__actions{margin-left:auto;display:flex}@keyframes attached-flash{0%{background-color:rgb(var(--ax-sys-color-success-50))}to{background-color:transparent}}.__empty-state{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.__empty-state:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
-                CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: 
+                CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: 
                 // ACoreX
                 AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { 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: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: 
                 // Platform
@@ -9214,7 +9386,7 @@ class AXPFileUploaderWidgetColumnComponent extends AXPColumnWidgetComponent {
     <span class="ax-cursor-pointer ax-text-primary ax-underline" (click)="openFileList()"
       >{{ count() }} {{ '@document-management:file' | translate | async }}</span
     >
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFileUploaderWidgetColumnComponent, decorators: [{
             type: Component,
@@ -9484,7 +9656,7 @@ class AXPFileUploaderWidgetEditComponent extends AXPValueWidgetComponent {
         [readonly]="readonly()"
       ></axp-file-list>
     </div>
-  `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { 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: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".__drag-over{background-color:rgba(var(--ax-sys-color-primary-50),.1);border:2px dashed rgb(var(--ax-sys-color-primary-500));border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { 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: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPFileListComponent, selector: "axp-file-list", inputs: ["readonly", "fileEditable", "files", "plugins", "excludePlugins", "host"], outputs: ["onRemove", "onRevert", "onRename"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFileUploaderWidgetEditComponent, decorators: [{
             type: Component,
@@ -10917,7 +11089,7 @@ class AXPQrcodeWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$d.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: AXPopoverModule }, { kind: "component", type: i3$6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXQrcodeModule }, { kind: "component", type: i1$d.AXQrcodeComponent, selector: "ax-qrcode", inputs: ["content", "size", "level", "color", "backgroundColor", "outputType"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQrcodeWidgetEditComponent, decorators: [{
             type: Component,
@@ -11510,33 +11682,79 @@ const AXPSignatureWidget = {
 
 //#region ----   Component   ----
 class AXPStatusWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Dependencies   ----
+        this.statusService = inject(AXPStatusDefinitionProviderService);
+        //#endregion
+        //#region ----   Inputs   ----
+        this.rawValueSignal = signal(null, ...(ngDevMode ? [{ debugName: "rawValueSignal" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.resolvedStatuses = computed(() => {
+            const key = this.options['definitionKey'];
+            if (!key) {
+                return [];
+            }
+            return this.statusService.getStatus(key)?.statuses ?? [];
+        }, ...(ngDevMode ? [{ debugName: "resolvedStatuses" }] : []));
+        this.statusItem = computed(() => {
+            const value = this.rawValueSignal();
+            if (!value) {
+                return null;
+            }
+            if (typeof value === 'object') {
+                const name = value?.name;
+                if (name) {
+                    return value;
+                }
+                return null;
+            }
+            if (typeof value === 'string') {
+                return this.resolvedStatuses().find((status) => status.name === value) ?? null;
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "statusItem" }] : []));
+    }
+    set rawValueInput(value) {
+        this.rawValueSignal.set(value);
+    }
+    //#endregion
+    //#region ----   Utilities   ----
+    getStatusVisual(status) {
+        return resolveStatusVisual(status?.color);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPStatusWidgetColumnComponent, isStandalone: true, selector: "axp-status-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `
-    @if (rawValue) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPStatusWidgetColumnComponent, isStandalone: true, selector: "axp-status-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData", rawValueInput: ["rawValue", "rawValueInput"] }, usesInheritance: true, ngImport: i0, template: `
+    @let status = statusItem();
+    @if (status) {
+      @let visual = getStatusVisual(status);
       <div
-        class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium ax-surface"
-        [style.background-color]="rawValue.color || null"
-        [style.color]="rawValue.color ? 'white' : null"
+        class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium axp-status-chip"
+        [ngClass]="visual.chipClass"
+        [ngStyle]="visual.chipStyle"
       >
-        <span>{{ rawValue.title | translate | async }}</span>
+        <span>{{ status.title | translate | async }}</span>
       </div>
     } @else {
       <span class="ax-text-muted">---</span>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-status-widget-column',
                     template: `
-    @if (rawValue) {
+    @let status = statusItem();
+    @if (status) {
+      @let visual = getStatusVisual(status);
       <div
-        class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium ax-surface"
-        [style.background-color]="rawValue.color || null"
-        [style.color]="rawValue.color ? 'white' : null"
+        class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium axp-status-chip"
+        [ngClass]="visual.chipClass"
+        [ngStyle]="visual.chipStyle"
       >
-        <span>{{ rawValue.title | translate | async }}</span>
+        <span>{{ status.title | translate | async }}</span>
       </div>
     } @else {
       <span class="ax-text-muted">---</span>
@@ -11544,9 +11762,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXTranslationModule],
-                    inputs: ['rawValue', 'rowData'],
+                    inputs: ['rawValue', 'rowData']
                 }]
-        }] });
+        }], propDecorators: { rawValueInput: [{
+                type: Input,
+                args: ['rawValue']
+            }] } });
 
 var statusWidgetColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -11558,8 +11779,17 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Properties   ----
-        this.statuses = computed(() => this.options()['statuses'] ?? [], ...(ngDevMode ? [{ debugName: "statuses" }] : []));
-        this.transitions = computed(() => this.options()['transitions'] ?? [], ...(ngDevMode ? [{ debugName: "transitions" }] : []));
+        this.statusService = inject(AXPStatusDefinitionProviderService);
+        this.definitionKey = computed(() => this.options()['definitionKey'] ?? null, ...(ngDevMode ? [{ debugName: "definitionKey" }] : []));
+        this.provider = computed(() => {
+            const key = this.definitionKey();
+            if (!key) {
+                return undefined;
+            }
+            return this.statusService.getStatus(key);
+        }, ...(ngDevMode ? [{ debugName: "provider" }] : []));
+        this.statuses = computed(() => this.provider()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "statuses" }] : []));
+        this.transitions = computed(() => this.provider()?.transitions ?? [], ...(ngDevMode ? [{ debugName: "transitions" }] : []));
         // Track the entity path to detect when entity changes
         this.entityPath = signal(null, ...(ngDevMode ? [{ debugName: "entityPath" }] : []));
         // Initial value - set when entity loads and reset when entity changes (for transition checking)
@@ -11568,11 +11798,11 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
         // Returns the full status item object so select-box can display the textField correctly
         this.currentValue = computed(() => {
             const value = this.getValue();
-            if (!value?.name) {
+            const statusName = typeof value === 'string' ? value : value?.name;
+            if (!statusName) {
                 return null;
             }
             // Find the matching status item from statusItems to ensure we have the full object
-            const statusName = value.name;
             const items = this.statusItems();
             return items.find((s) => s?.name === statusName) ?? null;
         }, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
@@ -11601,12 +11831,21 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
             // 2. We have a value from entity
             // 3. Initial value is not set yet (null)
             // This ensures initial value is set only once per entity load
-            if (currentPath && value?.name && !currentInitial) {
+            const statusName = typeof value === 'string' ? value : value?.name;
+            if (currentPath && statusName && !currentInitial) {
                 untracked(() => {
-                    this.initialValue.set(value.name);
+                    this.initialValue.set(statusName);
                 });
             }
         }, ...(ngDevMode ? [{ debugName: "setInitialValue" }] : []));
+        // Normalize legacy object values into string identifiers to keep storage consistent
+        this.normalizeValue = effect(() => {
+            const value = this.getValue();
+            if (value && typeof value === 'object' && value?.name) {
+                const name = value.name;
+                untracked(() => this.setValue(name));
+            }
+        }, ...(ngDevMode ? [{ debugName: "normalizeValue" }] : []));
         //#endregion
         //#region ----   Computed Properties   ----
         this.statusItems = computed(() => {
@@ -11633,14 +11872,21 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
             };
             return items.map((s) => ({
                 ...s,
-                disabled: !canGo(s?.name),
+                disabled: !canGo(s?.name ?? ''),
             }));
         }, ...(ngDevMode ? [{ debugName: "statusItems" }] : []));
     }
     //#endregion
     //#region ----   Event Handlers   ----
     handleValueChange(e) {
-        this.setValue(e.component.selectedItems[0]);
+        const selected = e.component?.selectedItems?.[0];
+        const value = typeof e.value === 'string' ? e.value : selected?.name;
+        this.setValue(value ?? null);
+    }
+    //#endregion
+    //#region ----   Utilities   ----
+    getStatusVisual(status) {
+        return resolveStatusVisual(status?.color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPStatusWidgetEditComponent, isStandalone: true, selector: "axp-status-widget-edit", usesInheritance: true, ngImport: i0, template: `
@@ -11651,6 +11897,7 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
       [valueField]="'name'"
       [textField]="'title'"
       [itemTemplate]="itemTemplate"
+      [selectedTemplate]="selectedTemplate"
     >
       <ax-search-box>
         <ax-clear-button></ax-clear-button>
@@ -11660,26 +11907,35 @@ class AXPStatusWidgetEditComponent extends AXPValueWidgetComponent {
     <!-- Custom Status Item Template -->
     <ng-template #itemTemplate let-context>
       @let item = context.data;
-      <div
-    class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 "
-  >
-    <div
-      class="ax-size-8 ax-rounded-full ax-grid ax-place-items-center"
-      [style.background-color]="item.color"
-    >
-      @if (item.icon) {
-        <i [class]="item.icon" class="ax-text-white ax-text-xs"></i>
-      }
-    </div>
-    <div class="ax-flex-1">
-      <ax-title>{{ item.title | translate | async }}</ax-title>
-      @if (item.description) {
-        <ax-subtitle>{{ item.description | translate | async }}</ax-subtitle>
-      }
-    </div>
-  </div>
+      @let visual = getStatusVisual(item);
+      <div class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 axp-status-chip">
+        <i
+          class="fa-solid fa-bookmark axp-status-icon"
+          [ngClass]="visual.iconClass"
+          [ngStyle]="visual.iconStyle"
+        ></i>
+        <div class="ax-flex-1">
+          <ax-title>{{ item.title | translate | async }}</ax-title>
+          @if (item.description) {
+            <ax-subtitle>{{ item.description | translate | async }}</ax-subtitle>
+          }
+        </div>
+      </div>
+    </ng-template>
+    <ng-template #selectedTemplate let-item>
+      @let visual = getStatusVisual(item?.data);
+      <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-sm axp-status-chip">
+        <i
+          class="fa-solid fa-bookmark axp-status-icon"
+          [ngClass]="visual.iconClass"
+          [ngStyle]="visual.iconStyle"
+        ></i>
+        <span class="ax-font-medium">
+          {{ item?.data?.title | translate | async }}
+        </span>
+      </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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", "itemHeight", "maxVisibleItems", "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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetEditComponent, decorators: [{
             type: Component,
@@ -11693,6 +11949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       [valueField]="'name'"
       [textField]="'title'"
       [itemTemplate]="itemTemplate"
+      [selectedTemplate]="selectedTemplate"
     >
       <ax-search-box>
         <ax-clear-button></ax-clear-button>
@@ -11702,24 +11959,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     <!-- Custom Status Item Template -->
     <ng-template #itemTemplate let-context>
       @let item = context.data;
-      <div
-    class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 "
-  >
-    <div
-      class="ax-size-8 ax-rounded-full ax-grid ax-place-items-center"
-      [style.background-color]="item.color"
-    >
-      @if (item.icon) {
-        <i [class]="item.icon" class="ax-text-white ax-text-xs"></i>
-      }
-    </div>
-    <div class="ax-flex-1">
-      <ax-title>{{ item.title | translate | async }}</ax-title>
-      @if (item.description) {
-        <ax-subtitle>{{ item.description | translate | async }}</ax-subtitle>
-      }
-    </div>
-  </div>
+      @let visual = getStatusVisual(item);
+      <div class="ax-flex ax-w-full ax-items-center ax-gap-3 ax-rounded ax-p-2 axp-status-chip">
+        <i
+          class="fa-solid fa-bookmark axp-status-icon"
+          [ngClass]="visual.iconClass"
+          [ngStyle]="visual.iconStyle"
+        ></i>
+        <div class="ax-flex-1">
+          <ax-title>{{ item.title | translate | async }}</ax-title>
+          @if (item.description) {
+            <ax-subtitle>{{ item.description | translate | async }}</ax-subtitle>
+          }
+        </div>
+      </div>
+    </ng-template>
+    <ng-template #selectedTemplate let-item>
+      @let visual = getStatusVisual(item?.data);
+      <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-sm axp-status-chip">
+        <i
+          class="fa-solid fa-bookmark axp-status-icon"
+          [ngClass]="visual.iconClass"
+          [ngStyle]="visual.iconStyle"
+        ></i>
+        <span class="ax-font-medium">
+          {{ item?.data?.title | translate | async }}
+        </span>
+      </div>
     </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11737,26 +12003,41 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Computed Properties   ----
-        this.colorField = computed(() => this.options()['colorField'] ?? 'color', ...(ngDevMode ? [{ debugName: "colorField" }] : []));
+        this.statusService = inject(AXPStatusDefinitionProviderService);
+        this.definitionKey = computed(() => this.options()['definitionKey'] ?? null, ...(ngDevMode ? [{ debugName: "definitionKey" }] : []));
+        this.provider = computed(() => {
+            const key = this.definitionKey();
+            if (!key) {
+                return undefined;
+            }
+            return this.statusService.getStatus(key);
+        }, ...(ngDevMode ? [{ debugName: "provider" }] : []));
+        this.resolvedStatuses = computed(() => this.provider()?.statuses ?? [], ...(ngDevMode ? [{ debugName: "resolvedStatuses" }] : []));
+        this.synchronizeOptions = effect(() => {
+            const statuses = this.resolvedStatuses();
+            untracked(() => {
+                const currentDataSource = this.options()['dataSource'];
+                if (!isEqual(currentDataSource, statuses)) {
+                    this.setOptions({ dataSource: statuses });
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "synchronizeOptions" }] : []));
     }
     //#endregion
-    //#region ----   Utility Methods   ----
-    /**
-     * Gets the color value from the item
-     */
-    getItemColor(item) {
-        const color = item?.[this.colorField()];
-        return color || null;
+    //#region ----   Utilities   ----
+    getStatusVisual(status) {
+        return resolveStatusVisual(status?.color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPStatusWidgetViewComponent, isStandalone: true, selector: "axp-status-widget-view", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-flex-wrap ax-gap-2">
       @if (selectedItems().length > 0) {
         @for (item of selectedItems(); track $index) {
+          @let visual = getStatusVisual(item);
           <div
-            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium ax-surface"
-            [style.background-color]="getItemColor(item) || null"
-            [style.color]="getItemColor(item) ? 'white' : null"
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium axp-status-chip"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
           >
             <span>{{ item[textField()] | translate | async }}</span>
           </div>
@@ -11765,7 +12046,7 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
         <span class="ax-text-muted">---</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStatusWidgetViewComponent, decorators: [{
             type: Component,
@@ -11775,10 +12056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     <div class="ax-flex ax-flex-wrap ax-gap-2">
       @if (selectedItems().length > 0) {
         @for (item of selectedItems(); track $index) {
+          @let visual = getStatusVisual(item);
           <div
-            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium ax-surface"
-            [style.background-color]="getItemColor(item) || null"
-            [style.color]="getItemColor(item) ? 'white' : null"
+            class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-2 ax-py-0.5 ax-text-xs ax-font-medium axp-status-chip"
+            [ngClass]="visual.chipClass"
+            [ngStyle]="visual.chipStyle"
           >
             <span>{{ item[textField()] | translate | async }}</span>
           </div>
@@ -11812,48 +12094,6 @@ const AXPStatusWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
-        // Note: custom options like 'statuses' and 'transitions' are supported via options typing,
-        // but not declared as widget design-time properties here to satisfy schema typing.
-        // {
-        //   name: 'showIcon',
-        //   title: 'Show Icon',
-        //   description: 'Display status icon',
-        //   dataType: 'boolean',
-        //   defaultValue: true,
-        // },
-        // {
-        //   name: 'showBadge',
-        //   title: 'Show Badge',
-        //   description: 'Display status as badge',
-        //   dataType: 'boolean',
-        //   defaultValue: true,
-        // },
-        // {
-        //   name: 'badgeStyle',
-        //   title: 'Badge Style',
-        //   description: 'Badge display style',
-        //   dataType: 'string',
-        //   defaultValue: 'default',
-        //   options: [
-        //     { value: 'default', text: 'Default' },
-        //     { value: 'outline', text: 'Outline' },
-        //     { value: 'solid', text: 'Solid' },
-        //   ],
-        // },
-        // {
-        //   name: 'colorField',
-        //   title: 'Color Field',
-        //   description: 'Field name for status color',
-        //   dataType: 'string',
-        //   defaultValue: 'color',
-        // },
-        // {
-        //   name: 'iconField',
-        //   title: 'Icon Field',
-        //   description: 'Field name for status icon',
-        //   dataType: 'string',
-        //   defaultValue: 'icon',
-        // },
     ],
     components: {
         view: {
@@ -11871,6 +12111,156 @@ const AXPStatusWidget = {
     },
 };
 
+const AXPWidgetFieldConfiguratorWidget = {
+    name: 'widget-field-configurator',
+    title: 'Widget Field Configurator',
+    icon: 'fa-solid fa-puzzle-piece',
+    description: 'Configure widget type and options for a single field',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
+    type: 'editor',
+    defaultFilterWidgetName: 'string-filter',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        {
+            name: 'fieldName',
+            title: 'Field Name',
+            visible: true,
+            group: { name: 'general', title: 'General', order: 1 },
+            schema: {
+                dataType: 'string',
+                interface: {
+                    path: 'fieldName',
+                    type: 'text-box',
+                    options: {
+                        placeholder: 'Enter field name',
+                    },
+                },
+            },
+        },
+        {
+            name: 'label',
+            title: 'Label',
+            visible: true,
+            group: { name: 'general', title: 'General', order: 1 },
+            schema: {
+                dataType: 'string',
+                interface: {
+                    path: 'label',
+                    type: 'text-box',
+                    options: {
+                        placeholder: 'Enter label',
+                    },
+                },
+            },
+        },
+    ],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return widgetFieldConfiguratorWidgetEdit_component; }).then((c) => c.AXPWidgetFieldConfiguratorWidgetEditComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return widgetFieldConfiguratorWidgetEdit_component; }).then((c) => c.AXPWidgetFieldConfiguratorWidgetEditComponent),
+        },
+    },
+};
+
+class AXPWidgetFieldConfiguratorWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Computed Properties   ----
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.fieldName = computed(() => this.options()['fieldName'] || 'field', ...(ngDevMode ? [{ debugName: "fieldName" }] : []));
+        this.label = computed(() => this.options()['label'] || 'Widget Type', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        //#endregion
+        //#region ----   State Signals   ----
+        // Track if component is initialized with actual value
+        this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
+        //#endregion
+        //#region ----   Models   ----
+        // Model for two-way binding with the configurator
+        this.widgetConfigModel = model({ type: '', options: {} }, ...(ngDevMode ? [{ debugName: "widgetConfigModel" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        // Effect to sync widget value to configurator model (one-way: value -> model)
+        this.syncValueToConfigurator = effect(() => {
+            const value = this.getValue();
+            // If we have a value, sync it to the model and mark as initialized
+            if (value && value.type) {
+                const currentModel = untracked(() => this.widgetConfigModel());
+                if (!isEqual(value, currentModel)) {
+                    untracked(() => {
+                        this.widgetConfigModel.set(value);
+                        this.isInitialized.set(true);
+                    });
+                }
+            }
+            else {
+                // If no value exists, still mark as initialized to show the empty configurator
+                untracked(() => {
+                    if (!this.isInitialized()) {
+                        this.isInitialized.set(true);
+                    }
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "syncValueToConfigurator" }] : []));
+        // Effect to sync configurator model changes back to widget value (one-way: model -> value)
+        this.syncConfiguratorToValue = effect(() => {
+            const modelValue = this.widgetConfigModel();
+            // Only sync back if component is initialized
+            if (!untracked(() => this.isInitialized())) {
+                return;
+            }
+            // Skip if model has empty type
+            if (!modelValue || !modelValue.type) {
+                return;
+            }
+            const currentValue = untracked(() => this.getValue());
+            // Only update if there's a meaningful change using deep comparison
+            if (!isEqual(modelValue, currentValue)) {
+                untracked(() => {
+                    this.setValue(modelValue);
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "syncConfiguratorToValue" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetFieldConfiguratorWidgetEditComponent, isStandalone: true, selector: "axp-widget-field-configurator-widget-edit", inputs: { widgetConfigModel: { classPropertyName: "widgetConfigModel", publicName: "widgetConfigModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widgetConfigModel: "widgetConfigModelChange" }, usesInheritance: true, ngImport: i0, template: `
+    @if (isInitialized()) {
+      <axp-widget-field-configurator
+        [(widget)]="widgetConfigModel"
+        [fieldName]="fieldName()"
+        [label]="label()"
+        [readonly]="readonly()"
+      ></axp-widget-field-configurator>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPWidgetFieldConfiguratorComponent, selector: "axp-widget-field-configurator", inputs: ["widget", "label", "fieldName", "readonly"], outputs: ["widgetChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-field-configurator-widget-edit',
+                    template: `
+    @if (isInitialized()) {
+      <axp-widget-field-configurator
+        [(widget)]="widgetConfigModel"
+        [fieldName]="fieldName()"
+        [label]="label()"
+        [readonly]="readonly()"
+      ></axp-widget-field-configurator>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXPWidgetFieldConfiguratorComponent],
+                }]
+        }], propDecorators: { widgetConfigModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetConfigModel", required: false }] }, { type: i0.Output, args: ["widgetConfigModelChange"] }] } });
+
+var widgetFieldConfiguratorWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPWidgetFieldConfiguratorWidgetEditComponent: AXPWidgetFieldConfiguratorWidgetEditComponent
+});
+
 class AXPAdvancedGridWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
     constructor() {
         super(...arguments);
@@ -12839,23 +13229,9 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         this.look = computed(() => this.options()['look'] || 'card', ...(ngDevMode ? [{ debugName: "look" }] : []));
         this.cols = computed(() => this.options()['cols'] || 1, ...(ngDevMode ? [{ debugName: "cols" }] : []));
         this.showTitle = computed(() => this.options()['showTitle'] ?? true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
-        // Check if there are multiple groups in the parent
-        this.hasMultipleGroups = computed(() => {
-            if (!this.parent) {
-                return false;
-            }
-            const siblings = this.parent.node.children ?? [];
-            const groupSiblings = siblings.filter(sibling => sibling.type === 'fieldset-layout' &&
-                (sibling.options?.['look'] === 'group' || sibling.options?.['look'] === undefined));
-            return groupSiblings.length > 1;
-        }, ...(ngDevMode ? [{ debugName: "hasMultipleGroups" }] : []));
-        // Show title only if showTitle is true and there are multiple groups
+        // Show title only if showTitle is true and title is not empty
         this.shouldShowTitle = computed(() => {
-            if (!this.showTitle())
-                return false;
-            if (this.look() !== 'group')
-                return true;
-            return this.hasMultipleGroups();
+            return this.showTitle() && !isEmpty(this.title());
         }, ...(ngDevMode ? [{ debugName: "shouldShowTitle" }] : []));
     }
     toggleCollapse() {
@@ -12864,11 +13240,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\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  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <!-- @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      } -->\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\n  @if (shouldShowTitle()) {\n  <div class=\"legend\">\n    <!-- @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    } -->\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </div>\n  }\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<!-- 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{display:grid;gap:1rem}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{padding:0;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{margin-bottom:1rem;display:flex;flex-direction:column;gap:.25rem;padding:0}:host .group .legend .title{font-size:1rem;line-height:1.5rem;font-weight:500}:host .group .legend .title-line{height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host .group .content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-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{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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 .container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    <!-- @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    } -->\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <!-- @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      } -->\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- 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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem}:host>.card>.legend .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .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{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\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  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <!-- @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      } -->\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\n  @if (shouldShowTitle()) {\n  <div class=\"legend\">\n    <!-- @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    } -->\n    <h3 class=\"title\">{{ title() | translate | async }}</h3>\n  </div>\n  }\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<!-- 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{display:grid;gap:1rem}:host .fieldset .content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host .group{padding:0;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{margin-bottom:1rem;display:flex;flex-direction:column;gap:.25rem;padding:0}:host .group .legend .title{font-size:1rem;line-height:1.5rem;font-weight:500}:host .group .legend .title-line{height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host .group .content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-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{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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 .container{display:grid;gap:1rem}\n"] }]
+            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n<!-- fieldset Style -->\n@case ('fieldset') {\n<fieldset class=\"fieldset\">\n  @if (shouldShowTitle()) {\n  <legend class=\"legend\" (click)=\"toggleCollapse()\">\n    <!-- @if (icon()) {\n    <i [class]=\"icon()\" class=\"ax-text-sm\"></i>\n    } -->\n    {{ title() | translate | async }}\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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  @if (shouldShowTitle()) {\n  <div class=\"legend\" (click)=\"toggleCollapse()\">\n    <div class=\"caption\">\n      <!-- @if (icon()) {\n      <i [class]=\"icon()\" class=\"ax-text-md\"></i>\n      } -->\n      <div class=\"text-content\">\n        <h3 class=\"title\">{{ title() | translate | async }}</h3>\n        @if (description()) {\n        <p class=\"description\">{{ description() | translate | async }}</p>\n        }\n      </div>\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\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\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  @if (shouldShowTitle()) {\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    <div class=\"title-line\"></div>\n  </legend>\n  }\n  @if (!collapsible() || isOpen()) {\n  <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n    @if (description()) {\n    <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\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<!-- Container Style -->\n@case ('container') {\n<div class=\"container\">\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<!-- 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;min-width:0px;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>.legend .title{margin:0;flex-shrink:0;white-space:nowrap;padding:0}:host>.fieldset>.content{display:grid;gap:1rem}:host>.fieldset>.content .description{padding-top:.25rem;padding-bottom:.75rem;font-size:.875rem;line-height:1.25rem;opacity:.65}:host>.group{padding:0;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{margin-bottom:1rem;display:flex;width:100%;flex-direction:column;gap:.25rem;padding:0}:host>.group>.legend .title{margin:0;width:fit-content;white-space:nowrap;padding:0;font-size:1rem;line-height:1.5rem;font-weight:500}:host>.group>.legend .title-line{margin-top:.25rem;height:1px;width:100%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}:host>.group>.content{display:grid;gap:1rem}: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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;padding:.625rem 1.25rem}:host>.card>.legend .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.625}:host>.card>.legend .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{display:grid;gap:1rem;border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-top-width:1px;padding:1.25rem;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>.container{display:grid;gap:1rem}\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -13364,7 +13740,7 @@ class AXPRepeaterWidgetDesignerComponent extends AXPValueWidgetComponent {
         <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AXPWidgetCoreModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPRepeaterWidgetDesignerComponent, decorators: [{
             type: Component,
@@ -13538,7 +13914,7 @@ class AXPRepeaterWidgetEditComponent extends AXPValueWidgetComponent {
         You haven't added any items yet. Click “Start Adding Items” to get started!
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: 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: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPRepeaterWidgetEditComponent, decorators: [{
             type: Component,
@@ -14073,7 +14449,7 @@ const AXPStepWizardWidget = {
     icon: 'fa-solid fa-image-user',
     categories: AXP_WIDGETS_LAYOUT_CATEGORY,
     groups: [AXPWidgetGroupEnum.FormElement],
-    type: 'editor',
+    type: 'view',
     properties: [],
     components: {
         view: {
@@ -15777,7 +16153,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></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\n  color=\"primary\"\n  text=\"Reset\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></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 (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              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\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              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\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm ax-max-w-12\"\n    ></ax-number-box>\n    <span class=\"ax-text-xs\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm ax-max-w-12\"\n    ></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    >\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') {\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.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-24\">\n        <ax-select-box\n          class=\"ax-sm\"\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-24\">\n        <ax-select-box\n          class=\"ax-sm\"\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\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"ax-w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm 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 ax-h-12\">\n        <span class=\"ax-text-xs\"\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 ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm 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\"><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></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-sm 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)=\"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\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-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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: i2$4.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", "itemHeight", "maxVisibleItems", "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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$6.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.3.12", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints ax-pb-4\">\n  <ax-selection-list\n    [direction]=\"'horizontal'\"\n    [items]=\"selectionItems\"\n    [look]=\"'card'\"\n    [customTemplate]=\"customTemplate\"\n    [showControl]=\"false\"\n    [ngModel]=\"currentBreakpoint()\"\n    (onValueChanged)=\"changeBreakPoint($event)\"\n  ></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\n  color=\"primary\"\n  text=\"Reset\"\n  [disabled]=\"currentBreakpoint() === 'default'\"\n  (click)=\"resetBreakpoint()\"\n></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 (onClick)=\"setGridDirection('row')\" [selected]=\"gridDirection() === 'row'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              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\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 10.7929L9.79289 4H11V4.20711L4.20711 11H3V10.7929Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n      <ax-button-group-item (onClick)=\"setGridDirection('column')\" [selected]=\"gridDirection() === 'column'\"\n        ><ax-prefix\n          ><svg\n            data-wf-icon=\"FlexFlowColumnWrapIcon\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              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\"\n            ></path>\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M10.7929 3L4 9.79289L4 11L4.20711 11L11 4.20711L11 3L10.7929 3Z\"\n              fill=\"currentColor\"\n            ></path></svg></ax-prefix\n      ></ax-button-group-item>\n    </ax-button-group>\n  </div>\n  <span>Grid</span>\n  <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1\">\n    <span class=\"ax-text-xs\">Row</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"rows()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'row')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm ax-max-w-12\"\n    ></ax-number-box>\n    <span class=\"ax-text-xs\">Column</span>\n    <ax-number-box\n      [minValue]=\"1\"\n      [maxValue]=\"12\"\n      [value]=\"columns()\"\n      (onValueChanged)=\"setRowOrColumn($event.value, 'column')\"\n      [changeOnScroll]=\"true\"\n      [showSpinButtons]=\"false\"\n      class=\"ax-sm ax-max-w-12\"\n    ></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    >\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') {\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.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-24\">\n        <ax-select-box\n          class=\"ax-sm\"\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-24\">\n        <ax-select-box\n          class=\"ax-sm\"\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\n  <span>Gap</span>\n  <div class=\"ax-flex ax-gap-2 ax-justify-between ax-items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"ax-w-32\"\n        [values]=\"gap().x\"\n        (valuesChange)=\"setGap($event ?? 0, 'both')\"\n      ></ax-range-slider>\n      <ax-number-box\n        [minValue]=\"0\"\n        [maxValue]=\"999\"\n        [value]=\"gap().x\"\n        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        [changeOnScroll]=\"true\"\n        class=\"ax-sm 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 ax-h-12\">\n        <span class=\"ax-text-xs\"\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 ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          [changeOnScroll]=\"true\"\n          class=\"ax-sm 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\"><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></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-sm 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)=\"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\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-grid-options-widget{--ax-comp-range-slider-handler-size: .75rem}axp-grid-options-widget ax-selection-list>ul{flex-wrap:nowrap;overflow:auto;padding-bottom:.5rem;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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$2.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", "itemHeight", "maxVisibleItems", "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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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.3.12", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -15947,7 +16323,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.3.12", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", 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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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", "itemHeight", "maxVisibleItems", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPAdvancedGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-advanced-grid-options-widget-editor", 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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPAdvancedGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -16424,7 +16800,7 @@ class AXPDirectionWidgetEditComponent extends AXPValueWidgetComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDirectionWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2\">\n  <div class=\"ax-mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (onValueChanged)=\"handleValueChanged($event)\"\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          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: ["axp-direction-widget-editor ax-selection-list>ul{flex-wrap:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: "14.0.0", version: "20.3.12", type: AXPDirectionWidgetEditComponent, isStandalone: true, selector: "axp-direction-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-pt-2\">\n  <div class=\"ax-mt-2\">\n    <ax-selection-list\n      [items]=\"directionOptions\"\n      [ngModel]=\"direction()\"\n      (onValueChanged)=\"handleValueChanged($event)\"\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          <i [class]=\"item.icon\"></i>\n          <span class=\"ax-ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n</div>\n", styles: ["axp-direction-widget-editor ax-selection-list>ul{flex-wrap:nowrap}\n"], dependencies: [{ 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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.3.12", ngImport: i0, type: AXPDirectionWidgetEditComponent, decorators: [{
             type: Component,
@@ -16879,7 +17255,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", 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 class=\"ax-sm\" [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') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\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                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\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\" 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              }\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') {\n              @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              }\n            } @else if (clickedJustify() === 'space-around') {\n              @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              }\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-max-w-28\" [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          class=\"ax-sm\"\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-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-select-box\n          class=\"ax-sm\"\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 ax-items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"ax-w-32\"\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        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm ax-max-w-[5.5rem]\"\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 ax-h-12\">\n        <span class=\"ax-text-xs\"\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 ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm 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\"\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></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm 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  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"ax-w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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: i2$4.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", "itemHeight", "maxVisibleItems", "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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$6.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", 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 class=\"ax-sm\" [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') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\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                    fill-opacity=\"0.3\"\n                  ></path>\n                </svg>\n              }\n            } @else if (hoveredJustify() === 'space-around') {\n              @if (clickedAlign() === 'stretch') {\n              } @else if (clickedAlign() === 'baseline' && hoveredAlign() === 'flex-start') {\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\" 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              }\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') {\n              @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              }\n            } @else if (clickedJustify() === 'space-around') {\n              @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              }\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-max-w-28\" [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          class=\"ax-sm\"\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-max-w-28\" [style.order]=\"flexDirectionIsColumn() ? '2' : '4'\">\n        <ax-select-box\n          class=\"ax-sm\"\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 ax-items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"ax-w-32\"\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        (onValueChanged)=\"setGap($event.value ?? 0, 'both')\"\n        class=\"ax-sm ax-max-w-[5.5rem]\"\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 ax-h-12\">\n        <span class=\"ax-text-xs\"\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 ></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().x\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'x')\"\n          class=\"ax-sm 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\"\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></span>\n        <ax-number-box\n          [minValue]=\"0\"\n          [maxValue]=\"999\"\n          [value]=\"gap().y\"\n          [changeOnScroll]=\"true\"\n          (onValueChanged)=\"setGap($event.value ?? 0, 'y')\"\n          class=\"ax-sm 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  <!-- <span>Items</span>\n  <div>\n    <ax-number-box\n      [minValue]=\"0\"\n      [maxValue]=\"12\"\n      [ngModel]=\"itemsCount()\"\n      (ngModelChange)=\"setItemsCount($event ?? 0)\"\n      class=\"ax-w-32\"\n    ></ax-number-box>\n  </div> -->\n</div>\n", styles: [":host{--ax-comp-range-slider-handler-size: .75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$g.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$g.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$2.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", "itemHeight", "maxVisibleItems", "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$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { 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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -17321,7 +17697,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -17336,7 +17712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXDropdownButtonModule,
                         AXNumberBoxModule,
                         AXDecoratorModule,
-                    ], template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px rgba(41,41,41,.44)}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
+                    ], template: "<div class=\"axp-spacing-box ax-flex ax-justify-center ax-items-center ax-pt-4 ax-pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"224\" height=\"112\" class=\"area\">\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ calculatedValues().margin.top + ' ' + units().margin.top }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ calculatedValues().margin.right + ' ' + units().margin.right }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ calculatedValues().margin.bottom + ' ' + units().margin.bottom }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div tabindex=\"0\" style=\"grid-area: 2 / 1 / 3 / 2\" class=\"axp-spacing-value-container\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ calculatedValues().margin.left + ' ' + units().margin.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"150\" height=\"62\" class=\"area\">\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:ax-brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 1 / 2 / 2 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{ this.calculatedValues().padding.top + ' ' + units().padding.top }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 3 / 3 / 4\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{ this.calculatedValues().padding.right + ' ' + units().padding.right }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 3 / 2 / 4 / 3\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{ this.calculatedValues().padding.bottom + ' ' + units().padding.bottom }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div tabindex=\"0\" class=\"axp-spacing-value-container\" style=\"grid-area: 2 / 1 / 3 / 2\">\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{ this.calculatedValues().padding.left + ' ' + units().padding.left }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg class=\"axp-spacing-padding-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">PADDING</text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg class=\"axp-spacing-margin-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">MARGIN</text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"ax-text-xs ax-text-center ax-text-neutral-400 ax-mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"ax-size-4 ax-cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path opacity=\"0.4\" d=\"M14 2L14 13L10 13L10 2L14 2Z\" fill=\"currentColor\" fill-opacity=\"0.67\"></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"ax-flex ax-justify-center ax-h-6 ax-flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"this.calculatedValues()[this.current().type][this.current().side]\"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button [text]=\"getSpacingUnitLabel(type, side)\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!ax-bg-gradient-to-b hover:!ax-from-white/20 hover:!ax-to-white/5 !ax-cursor-pointer\"\n            [class]=\"i.colspan ? 'ax-col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'ax-row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"ax-truncate\">\n              {{ i.label }}\n              <span class=\"ax-text-xs ax-text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-h-[1px] ax-mt-1 ax-mb-1 ax-bg-border-1 ax-pointer-events-none\"></div>\n\n    <div\n      [class.ax-opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"setSpacing(originalValues()[this.current().type][this.current().side], type, side)\"\n      tabindex=\"0\"\n      class=\"ax-outline-none ax-select-none ax-py-1 ax-px-2 ax-my-1 ax-min-h-6 ax-cursor-pointer hover:!ax-bg-[#404040]\"\n    >\n      <div class=\"ax-flex ax-flex-row ax-items-center\">\n        <div class=\"ax-min-w-6 ax-self-center ax-grow ax-basis-0\">\n          <div class=\"ax-items-center ax-box-border ax-grid ax-grid-cols-[16px_1fr_auto] ax-gap-x-2 ax-gap-y-1\">\n            <div class=\"ax-size-4\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"ax-self-center\">\n          <div\n            class=\"ax-cursor-default ax-select-none ax-text-[11.5px] ax-font-normal ax-leading-4 ax-tracking-tight ax-text-secondary ax-justify-self-end ax-ml-[1px]\"\n          >\n            <span><kbd>Ctrl</kbd> + <kbd>B</kbd></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n"] }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }] } });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -17477,7 +17853,7 @@ class AXPBaseValidationComponent {
     </div>
     <ng-content></ng-content>
     <div #el class="ax-h-[1px]"></div>
-  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$8.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2$7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBaseValidationComponent, decorators: [{
             type: Component,
@@ -17573,7 +17949,7 @@ class AXPBetweenValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBetweenValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -17869,7 +18245,7 @@ class AXPGreaterThanValidationWidgetEditComponent extends AXPValueWidgetComponen
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGreaterThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -17976,7 +18352,7 @@ class AXPLessThanValidationWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     </div>
-  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </axp-base-validation-component>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPBaseValidationComponent, selector: "axp-base-validation-component", inputs: ["validationStatus", "validationText", "validationTextPlaceholder"], outputs: ["validationStatusChange", "validationTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i1$2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLessThanValidationWidgetEditComponent, decorators: [{
             type: Component,
@@ -18557,6 +18933,8 @@ var index = /*#__PURE__*/Object.freeze({
     AXPToggleWidgetColumnComponent: AXPToggleWidgetColumnComponent,
     AXPToggleWidgetEditComponent: AXPToggleWidgetEditComponent,
     AXPToggleWidgetViewComponent: AXPToggleWidgetViewComponent,
+    AXPWidgetFieldConfiguratorWidget: AXPWidgetFieldConfiguratorWidget,
+    AXPWidgetFieldConfiguratorWidgetEditComponent: AXPWidgetFieldConfiguratorWidgetEditComponent,
     AXP_ABSOLUTE_UNITS: AXP_ABSOLUTE_UNITS,
     AXP_BORDER_RADIUS_UNITS: AXP_BORDER_RADIUS_UNITS,
     AXP_BORDER_WIDTH_UNITS: AXP_BORDER_WIDTH_UNITS,
@@ -20015,7 +20393,7 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -20042,7 +20420,7 @@ const AXPListToolbarWidget = {
     description: '',
     type: 'view',
     categories: [],
-    groups: [AXPWidgetGroupEnum.FormElement],
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
     icon: 'fa-solid fa-square',
     properties: [
         AXP_NAME_PROPERTY,
@@ -20234,7 +20612,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$6.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$7.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -20279,7 +20657,7 @@ class AXPTimerDurationWidgetViewComponent extends AXPValueWidgetComponent {
         this.internalValue = computed(() => this.timeDurationFormatter.millisecondsToMask(this.getValue(), this.from(), this.to(), this.label(), '00:00:00:00:00:00:00:000', true), ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTimerDurationWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPTimerDurationWidgetViewComponent, isStandalone: true, selector: "axp-time-duration-widget-view", usesInheritance: true, ngImport: i0, template: `<p class="ax-text-muted">{{ internalValue() | async }}</p>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPTimerDurationWidgetViewComponent, isStandalone: true, selector: "axp-time-duration-widget-view", usesInheritance: true, ngImport: i0, template: `<p class="ax-text-muted">{{ internalValue() | async }}</p>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTimerDurationWidgetViewComponent, decorators: [{
             type: Component,
@@ -20446,7 +20824,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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: i2$4.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", "itemHeight", "maxVisibleItems", "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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBooleanFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -20717,7 +21095,7 @@ class AXPDateTimeFilterWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: i2$4.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", "itemHeight", "maxVisibleItems", "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: i3$2.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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: i3$3.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDateTimeFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -20807,7 +21185,7 @@ class AXPFilterOperationsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFilterOperationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXSelectionListModule }, { kind: "component", type: i2$6.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPFilterOperationsComponent, isStandalone: true, selector: "axp-filter-operations", inputs: { selectedOperation: { classPropertyName: "selectedOperation", publicName: "selectedOperation", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOperation: "selectedOperationChange" }, ngImport: i0, template: "@if(operations().length){\n<ax-button #changeOperator look=\"blank\" color=\"default\" class=\"ax-sm\">\n  <ax-icon class=\"fa-solid fa-ellipsis-vertical\"></ax-icon>\n</ax-button>\n<ax-popover\n  #operatorsPopover\n  [target]=\"changeOperator\"\n  [openOn]=\"'toggle'\"\n  [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div\n    class=\"ax-max-h-max ax-overflow-auto ax-bg-lightest ax-py-5 ax-px-3 ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full ax-min-w-[250px]\"\n  >\n    <ax-selection-list\n      class=\"\"\n      [valueField]=\"'name'\"\n      [textField]=\"'title'\"\n      [(ngModel)]=\"selectedOperation\"\n      (ngModelChange)=\"operatorsPopover.close()\"\n      [direction]=\"'vertical'\"\n      [items]=\"operations()\"\n      [multiple]=\"false\"\n    ></ax-selection-list>\n  </div>\n</ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFilterOperationsComponent, decorators: [{
             type: Component,
@@ -20909,7 +21287,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
         (selectedOperationChange)="handleOperationChange($event)"
       ></axp-filter-operations>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: AXNumberBoxModule }, { kind: "component", type: i1$6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPNumberFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -21041,7 +21419,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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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", "itemHeight", "maxVisibleItems", "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: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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$2.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", "itemHeight", "maxVisibleItems", "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.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSelectFilterWidgetEditComponent, decorators: [{
             type: Component,
@@ -21138,7 +21516,7 @@ class AXPStringWidgetFilterComponent extends AXPValueWidgetComponent {
         (selectedOperationChange)="handleOperationChanged($event)"
       ></axp-filter-operations>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStringWidgetFilterComponent, decorators: [{
             type: Component,
@@ -21334,7 +21712,7 @@ class AXPFormFieldWidgetViewComponent extends AXPGridItemBaseLayoutWidgetCompone
         </ng-container>
       }
     </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3$1.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFormFieldWidgetViewComponent, decorators: [{
             type: Component,
@@ -22652,7 +23030,7 @@ class AXPTabSetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host.vertical{display:flex;width:100%;flex-direction:row}:host.vertical .content{display:block;width:100%}:host.horizontal{display:flex;width:100%;flex-direction:column}:host.horizontal .content{margin-top:1rem;display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i3$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host.vertical{display:flex;width:100%;flex-direction:row}:host.vertical .content{display:block;width:100%}:host.horizontal{display:flex;width:100%;flex-direction:column}:host.horizontal .content{margin-top:1rem;display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i3$4.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3$4.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTabSetWidgetViewComponent, decorators: [{
             type: Component,
@@ -22752,7 +23130,7 @@ class AXPTabSetItemWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         [mode]="this.mode"
       ></ng-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTabSetItemWidgetViewComponent, decorators: [{
             type: Component,
@@ -22895,6 +23273,7 @@ class AXPWidgetsModule {
                 widgets: [
                     AXPDocumentWidget,
                     AXPDynamicFormDesignerWidget,
+                    AXPWidgetFieldConfiguratorWidget,
                     //
                     AXPBlockWidget,
                     AXPFlexWidget,
@@ -22994,6 +23373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                             widgets: [
                                 AXPDocumentWidget,
                                 AXPDynamicFormDesignerWidget,
+                                AXPWidgetFieldConfiguratorWidget,
                                 //
                                 AXPBlockWidget,
                                 AXPFlexWidget,
@@ -23102,5 +23482,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPDynamicFormDesignerWidget, AXPDynamicFormDesignerWidgetColumnComponent, AXPDynamicFormDesignerWidgetEditComponent, AXPDynamicFormDesignerWidgetViewComponent, AXPEditFileUploaderCommand, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPExtraPropertiesSchemaWidget, AXPExtraPropertiesValuesWidget, AXPExtraPropertiesWidget, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileListComponent, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetService, AXPFileUploaderWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPACING_UNITS, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
+export { AXPAdvancedGridItemWidget, AXPAdvancedGridItemWidgetDesignerComponent, AXPAdvancedGridItemWidgetViewComponent, AXPAdvancedGridOptionsWidget, AXPAdvancedGridOptionsWidgetEditComponent, AXPAdvancedGridWidget, AXPAdvancedGridWidgetDesignerComponent, AXPAdvancedGridWidgetViewComponent, AXPAvatarWidget, AXPAvatarWidgetColumnComponent, AXPAvatarWidgetDesignerComponent, AXPAvatarWidgetEditComponent, AXPAvatarWidgetViewComponent, AXPBetweenExpressionValidationWidget, AXPBetweenValidationWidgetEditComponent, AXPBlockWidget, AXPBlockWidgetDesignerComponent, AXPBlockWidgetViewComponent, AXPBorderWidget, AXPBorderWidgetEditComponent, AXPButtonWidget, AXPButtonWidgetColumnComponent, AXPButtonWidgetViewComponent, AXPCallbackValidationWidget, AXPCallbackValidationWidgetEditComponent, AXPCheckBoxWidget, AXPCheckBoxWidgetColumnComponent, AXPCheckBoxWidgetDesignerComponent, AXPCheckBoxWidgetEditComponent, AXPCheckBoxWidgetViewComponent, AXPColorBoxWidget, AXPColorBoxWidgetColumnComponent, AXPColorBoxWidgetDesignerComponent, AXPColorBoxWidgetEditComponent, AXPColorBoxWidgetViewComponent, AXPColorPaletteWidget, AXPColorPaletteWidgetColumnComponent, AXPColorPaletteWidgetDesignerComponent, AXPColorPaletteWidgetEditComponent, AXPColorPaletteWidgetViewComponent, AXPConnectedDragDropListsWidget, AXPConnectedListsWidgetColumnComponent, AXPConnectedListsWidgetEditComponent, AXPConnectedListsWidgetViewComponent, AXPContactWidget, AXPContactWidgetColumnComponent, AXPContactWidgetEditComponent, AXPContactWidgetViewComponent, AXPDataListWidget, AXPDataListWidgetViewComponent, AXPDateTimeBoxWidget, AXPDateTimeBoxWidgetColumnComponent, AXPDateTimeBoxWidgetEditComponent, AXPDateTimeBoxWidgetViewComponent, AXPDirectionWidget, AXPDirectionWidgetEditComponent, AXPDragDropListWidget, AXPDynamicFormDesignerWidget, AXPDynamicFormDesignerWidgetColumnComponent, AXPDynamicFormDesignerWidgetEditComponent, AXPDynamicFormDesignerWidgetViewComponent, AXPEditFileUploaderCommand, AXPEditorJsWidget, AXPEditorJsWidgetColumnComponent, AXPEditorJsWidgetEditComponent, AXPEditorJsWidgetViewComponent, AXPEqualValidationWidget, AXPEqualValidationWidgetEditComponent, AXPExtraPropertiesSchemaWidget, AXPExtraPropertiesValuesWidget, AXPExtraPropertiesWidget, AXPFieldsetWidget, AXPFieldsetWidgetDesignerComponent, AXPFieldsetWidgetViewComponent, AXPFileListComponent, AXPFileUploaderWidget, AXPFileUploaderWidgetColumnComponent, AXPFileUploaderWidgetEditComponent, AXPFileUploaderWidgetService, AXPFileUploaderWidgetViewComponent, AXPFlexItemOptionsWidget, AXPFlexItemOptionsWidgetEditComponent, AXPFlexItemWidget, AXPFlexItemWidgetDesignerComponent, AXPFlexItemWidgetViewComponent, AXPFlexOptionsWidget, AXPFlexOptionsWidgetEditComponent, AXPFlexWidget, AXPFlexWidgetDesignerComponent, AXPFlexWidgetViewComponent, AXPGalleryWidget, AXPGalleryWidgetEditComponent, AXPGalleryWidgetViewComponent, AXPGreaterThanExpressionValidationWidget, AXPGreaterThanValidationWidgetEditComponent, AXPGridItemOptionsWidget, AXPGridItemOptionsWidgetEditComponent, AXPGridOptionsWidget, AXPGridOptionsWidgetEditComponent, AXPImageMarkerPopupComponent, AXPImageMarkerWidget, AXPImageMarkerWidgetColumnComponent, AXPImageMarkerWidgetEditComponent, AXPImageMarkerWidgetViewComponent, AXPLargeTextWidget, AXPLargeTextWidgetColumnComponent, AXPLargeTextWidgetEditComponent, AXPLargeTextWidgetViewComponent, AXPLessThanExpressionValidationWidget, AXPLessThanValidationWidgetEditComponent, AXPListWidgetColumnComponent, AXPListWidgetEditComponent, AXPListWidgetViewComponent, AXPMapWidgetEditComponent, AXPMapWidgetViewComponent, AXPMaxLengthExpressionValidationWidget, AXPMaxLengthValidationWidgetEditComponent, AXPMinLengthExpressionValidationWidget, AXPMinLengthValidationWidgetEditComponent, AXPNumberBoxWidget, AXPNumberBoxWidgetColumnComponent, AXPNumberBoxWidgetEditComponent, AXPNumberBoxWidgetViewComponent, AXPPageWidget, AXPPageWidgetViewComponent, AXPPasswordBoxWidget, AXPPasswordBoxWidgetColumnComponent, AXPPasswordBoxWidgetEditComponent, AXPPasswordBoxWidgetViewComponent, AXPQrcodeWidget, AXPQrcodeWidgetEditComponent, AXPQrcodeWidgetViewComponent, AXPRegularExpressionValidationWidget, AXPRegularExpressionValidationWidgetEditComponent, AXPRepeaterWidget, AXPRepeaterWidgetDesignerComponent, AXPRepeaterWidgetEditComponent, AXPRepeaterWidgetViewComponent, AXPRequiredValidationWidget, AXPRequiredValidationWidgetEditComponent, AXPRichTextWidget, AXPRichTextWidgetColumnComponent, AXPRichTextWidgetEditComponent, AXPRichTextWidgetViewComponent, AXPSchedulerPickerWidget, AXPSchedulerPickerWidgetColumnComponent, AXPSchedulerPickerWidgetEditComponent, AXPSchedulerPickerWidgetViewComponent, AXPSelectBoxWidget, AXPSelectBoxWidgetColumnComponent, AXPSelectBoxWidgetEditComponent, AXPSelectBoxWidgetViewComponent, AXPSelectionListWidget, AXPSelectionListWidgetColumnComponent, AXPSelectionListWidgetDesignerComponent, AXPSelectionListWidgetEditComponent, AXPSelectionListWidgetViewComponent, AXPSignatureWidget, AXPSignatureWidgetColumnComponent, AXPSignatureWidgetEditComponent, AXPSignatureWidgetViewComponent, AXPSpacingWidget, AXPSpacingWidgetEditComponent, AXPStatusWidget, AXPStatusWidgetColumnComponent, AXPStatusWidgetEditComponent, AXPStatusWidgetViewComponent, AXPStepWizardWidget, AXPStepWizardWidgetViewComponent, AXPTableItemWidget, AXPTableItemWidgetDesignerComponent, AXPTableItemWidgetViewComponent, AXPTableWidget, AXPTableWidgetDesignerComponent, AXPTableWidgetViewComponent, AXPTagEditorWidget, AXPTagEditorWidgetColumnComponent, AXPTagEditorWidgetEditComponent, AXPTagEditorWidgetViewComponent, AXPTemplateBoxWidget, AXPTemplateBoxWidgetColumnComponent, AXPTemplateBoxWidgetEditComponent, AXPTemplateBoxWidgetPrintComponent, AXPTemplateBoxWidgetViewComponent, AXPTextBoxWidget, AXPTextBoxWidgetColumnComponent, AXPTextBoxWidgetEditComponent, AXPTextBoxWidgetViewComponent, AXPToggleWidget, AXPToggleWidgetColumnComponent, AXPToggleWidgetEditComponent, AXPToggleWidgetViewComponent, AXPWidgetFieldConfiguratorWidget, AXPWidgetFieldConfiguratorWidgetEditComponent, AXPWidgetsModule, AXP_ABSOLUTE_UNITS, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BORDER_RADIUS_UNITS, AXP_BORDER_WIDTH_UNITS, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_PROPERTIES, AXP_DATA_SOURCE_PROPERTY, AXP_DATA_SOURCE_TEXT_FIELD, AXP_DATA_SOURCE_VALUE_FIELD, AXP_DATE_FORMAT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_Flex_Box_Align_Options, AXP_Flex_Box_Alignments, AXP_Flex_Box_Justify_Options, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_Grid_Box_Align_Items_Options, AXP_Grid_Box_Alignments, AXP_Grid_Box_Justify_Items_Options, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_RELATIVE_UNITS, AXP_RELATIVE_UNITS_NO_PERCENT, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPACING_UNITS, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGET_PROPERTY_GROUP, AXP_default_Border_Box_Units, AXP_default_Border_Box_Value, AXP_default_Spacing_Box_Units, AXP_default_Spacing_Box_Value, DEFAULT_STRATEGY_CONFIG, STRATEGY_CONFIG_TOKEN, booleanDefaultProperty, largeTextDefaultProperty, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty };
 //# sourceMappingURL=acorex-platform-layout-widgets.mjs.map