@acorex/platform 21.0.0-beta.13 → 21.0.0-beta.15

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

@@ -2312,7 +2312,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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) {
       @if (nullText) {
-        <span>{{ nullText }}</span>
+        <span>{{ nullText | translate | async }}</span>
       } @else {
         <span>---</span>
       }
@@ -2324,7 +2324,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ trulyText }}
+          {{ (trulyText | translate | async)! }}
         </span>
       } @else {
         @if (negative) {
@@ -2341,7 +2341,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ falsyText }}
+          {{ (falsyText | translate | async)! }}
         </span>
       } @else {
         @if (negative) {
@@ -2351,7 +2351,7 @@ class AXPCheckBoxWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
       }
     }
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCheckBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -2360,7 +2360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: ` <div>
     @if (this.rawValue === null || this.rawValue === undefined) {
       @if (nullText) {
-        <span>{{ nullText }}</span>
+        <span>{{ nullText | translate | async }}</span>
       } @else {
         <span>---</span>
       }
@@ -2372,7 +2372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ trulyText }}
+          {{ (trulyText | translate | async)! }}
         </span>
       } @else {
         @if (negative) {
@@ -2389,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ falsyText }}
+          {{ (falsyText | translate | async)! }}
         </span>
       } @else {
         @if (negative) {
@@ -2401,7 +2401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     }
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule],
+                    imports: [CommonModule, AXDecoratorModule, AXTranslationModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }] });
@@ -2536,7 +2536,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
     <div class="font-semibold">
       @if (this.getValue() === null || this.getValue() === undefined) {
         @if (nullText()) {
-          <span>{{ nullText() }}</span>
+          <span>{{ nullText() | translate | async }}</span>
         } @else {
           <span>---</span>
         }
@@ -2548,7 +2548,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
             [ngClass]="visual.chipClass"
             [ngStyle]="visual.chipStyle"
           >
-            {{ trulyText() }}
+            {{ (trulyText() | translate | async)! }}
           </span>
         } @else {
           @if (negative()) {
@@ -2565,7 +2565,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
             [ngClass]="visual.chipClass"
             [ngStyle]="visual.chipStyle"
           >
-            {{ falsyText() }}
+            {{ (falsyText() | translate | async)! }}
           </span>
         } @else {
           @if (negative()) {
@@ -2576,7 +2576,7 @@ class AXPCheckBoxWidgetViewComponent extends AXPValueWidgetComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCheckBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -2586,7 +2586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <div class="font-semibold">
       @if (this.getValue() === null || this.getValue() === undefined) {
         @if (nullText()) {
-          <span>{{ nullText() }}</span>
+          <span>{{ nullText() | translate | async }}</span>
         } @else {
           <span>---</span>
         }
@@ -2598,7 +2598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             [ngClass]="visual.chipClass"
             [ngStyle]="visual.chipStyle"
           >
-            {{ trulyText() }}
+            {{ (trulyText() | translate | async)! }}
           </span>
         } @else {
           @if (negative()) {
@@ -2615,7 +2615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             [ngClass]="visual.chipClass"
             [ngStyle]="visual.chipStyle"
           >
-            {{ falsyText() }}
+            {{ (falsyText() | translate | async)! }}
           </span>
         } @else {
           @if (negative()) {
@@ -2628,7 +2628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule],
+                    imports: [CommonModule, AXDecoratorModule, AXTranslationModule],
                 }]
         }] });
 
@@ -7710,6 +7710,8 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
         this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.hasClearButton = computed(() => this.options()['hasClearButton'] ?? false, ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
         this.allowSearch = computed(() => this.options()['allowSearch'] ?? false, ...(ngDevMode ? [{ debugName: "allowSearch" }] : /* istanbul ignore next */ []));
+        this.showItemTooltip = computed(() => this.options()['showItemTooltip'] ?? false, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
+        this.isItemTruncated = computed(() => this.options()['isItemTruncated'] ?? true, ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
         this.filter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
         this.filterMode = computed(() => this.options()['filterMode'] ?? false, ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
         /** For filter mode: display valueField from object to avoid [object Object] when value is stored as full item */
@@ -7939,6 +7941,8 @@ class AXPSelectBoxWidgetEditComponent extends AXPDataListWidgetComponent {
       [textTemplate]="textTemplate()"
       [multiple]="multiple()"
       [readonly]="readonly()"
+      [showItemTooltip]="showItemTooltip()"
+      [isItemTruncated]="isItemTruncated()"
       [ngModel]="filterMode() ? selectFilterDisplayValue() : getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -7974,6 +7978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       [textTemplate]="textTemplate()"
       [multiple]="multiple()"
       [readonly]="readonly()"
+      [showItemTooltip]="showItemTooltip()"
+      [isItemTruncated]="isItemTruncated()"
       [ngModel]="filterMode() ? selectFilterDisplayValue() : getValue()"
       (onValueChanged)="handleValueChange($event)"
     >
@@ -9809,7 +9815,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPToggleWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPToggleWidgetViewComponent, isStandalone: true, selector: "axp-toggle-widget-view", usesInheritance: true, ngImport: i0, template: ` @if (getValue() === null || getValue() === undefined) {
       @if (nullText()) {
-        <span>{{ nullText() }}</span>
+        <span>{{ nullText() | translate | async }}</span>
       } @else {
         <span>---</span>
       }
@@ -9821,7 +9827,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ trulyText() }}
+          {{ (trulyText() | translate | async)! }}
         </span>
       } @else {
         @if (negative()) {
@@ -9838,7 +9844,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ falsyText() }}
+          {{ (falsyText() | translate | async)! }}
         </span>
       } @else {
         @if (negative()) {
@@ -9847,7 +9853,7 @@ class AXPToggleWidgetViewComponent extends AXPValueWidgetComponent {
           <ax-icon class="fa-solid fa-xmark text-danger-500"> </ax-icon>
         }
       }
-    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPToggleWidgetViewComponent, decorators: [{
             type: Component,
@@ -9855,7 +9861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'axp-toggle-widget-view',
                     template: ` @if (getValue() === null || getValue() === undefined) {
       @if (nullText()) {
-        <span>{{ nullText() }}</span>
+        <span>{{ nullText() | translate | async }}</span>
       } @else {
         <span>---</span>
       }
@@ -9867,7 +9873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ trulyText() }}
+          {{ (trulyText() | translate | async)! }}
         </span>
       } @else {
         @if (negative()) {
@@ -9884,7 +9890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [ngClass]="visual.chipClass"
           [ngStyle]="visual.chipStyle"
         >
-          {{ falsyText() }}
+          {{ (falsyText() | translate | async)! }}
         </span>
       } @else {
         @if (negative()) {
@@ -9895,7 +9901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       }
     }`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule],
+                    imports: [CommonModule, AXDecoratorModule, AXTranslationModule],
                 }]
         }] });
 
@@ -20768,7 +20774,7 @@ class AXPGridOptionsWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints 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] ? '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 grid grid-cols-[auto_1fr] pt-2 gap-2 items-center 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=\"flex items-center justify-between gap-1\">\n    <span class=\"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 max-w-12\"\n    ></ax-number-box>\n    <span class=\"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 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=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 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=\"grid 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 absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] 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 absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] 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=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"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=\"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=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"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 min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! 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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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$1.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$7.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i2$5.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPGridOptionsWidgetEditComponent, isStandalone: true, selector: "axp-grid-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-grid-breakpoints 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] ? '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 grid grid-cols-[auto_1fr] pt-2 gap-2 items-center 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=\"flex items-center justify-between gap-1\">\n    <span class=\"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 max-w-12\"\n    ></ax-number-box>\n    <span class=\"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 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=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 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=\"grid 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 absolute inset-0 grid pointer-events-none transition-all\"\n          [style.justify-items]=\"hoveredJustify()\"\n          [style.align-items]=\"hoveredAlign()\"\n        >\n          <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n            <div class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] 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 absolute inset-0 grid pointer-events-none transition-all\"\n        [style.justify-items]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] 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=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span>X:</span>\n      <div class=\"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=\"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=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'single') {\n      <ax-range-slider\n        class=\"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 min-w-6\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! 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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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$1.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$7.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.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: "21.2.9", ngImport: i0, type: AXPGridOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -21368,7 +21374,7 @@ class AXPBorderWidgetEditComponent extends AXPValueWidgetComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n  <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n    <span class=\"text-sm font-light\">Radius</span>\n    <div class=\"flex gap-1 items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if (currentActiveRadiusSide() === 'all') {\n        <div class=\"flex justify-center items-center flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"flex justify-start items-center\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [maxValue]=\"100\"\n            [value]=\"allRadius()\"\n            [changeOnScroll]=\"true\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('all') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'all')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      } @else {\n        <div class=\"w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-left']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-right']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-left']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-right']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex justify-between items-center py-1\">\n    <span class=\"text-sm font-light\">Borders</span>\n  </div>\n\n  <div class=\"border-box flex justify-between items-center gap-4\">\n    <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"border-box-top col-start-2 row-start-1\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"top\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"border-box-right col-start-3 row-start-2\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"border-box-bottom col-start-2 row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"border-box-left col-start-1 row-start-2\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"border-box-all col-start-2 row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n      <div class=\"text-sm font-light\">Style</div>\n      <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n        <div class=\"text-sm font-light\">Width</div>\n        <div class=\"flex justify-start items-center max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-sm exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of widthUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n                      (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n\n        <div class=\"text-sm font-light\">Color</div>\n        <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBorderWidgetEditComponent, isStandalone: true, selector: "axp-border-widget-editor", viewQueries: [{ propertyName: "allBorderEl", first: true, predicate: ["allBorderEl"], descendants: true, isSignal: true }, { propertyName: "allRadiusEl", first: true, predicate: ["allRadiusEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-2 axp-border-container\">\n  <div class=\"radius-box flex justify-between items-center gap-2 h-[26px]\">\n    <span class=\"text-sm font-light\">Radius</span>\n    <div class=\"flex gap-1 items-center\">\n      <button\n        #allRadiusEl\n        (pointerdown)=\"handleActiveRadiusSide($event)\"\n        name=\"all\"\n        class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.5 5.5C2.5 3.84315 3.84315 2.5 5.5 2.5H10.5C12.1569 2.5 13.5 3.84315 13.5 5.5V10.5C13.5 12.1569 12.1569 13.5 10.5 13.5H5.5C3.84315 13.5 2.5 12.1569 2.5 10.5V5.5Z\"\n            stroke=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      <button (pointerdown)=\"handleActiveRadiusSide($event)\" name=\"sides\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M4.5 2C3.11929 2 2 3.11929 2 4.5V7H3V4.5C3 3.67157 3.67157 3 4.5 3H7V2H4.5Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M9 2V3H11.5C12.3284 3 13 3.67157 13 4.5V7H14V4.5C14 3.11929 12.8807 2 11.5 2H9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n            fill=\"currentColor\"\n          ></path>\n          <path\n            d=\"M7 14V13H4.5C3.67157 13 3 12.3284 3 11.5V9H2V11.5C2 12.8807 3.11929 14 4.5 14H7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </button>\n\n      @if (currentActiveRadiusSide() === 'all') {\n        <div class=\"flex justify-center items-center flex-shrink\">\n          <ax-range-slider\n            [values]=\"allRadius()\"\n            [min]=\"0\"\n            [max]=\"100\"\n            (valuesChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-24\"\n          ></ax-range-slider>\n        </div>\n        <div class=\"flex justify-start items-center\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [maxValue]=\"100\"\n            [value]=\"allRadius()\"\n            [changeOnScroll]=\"true\"\n            (valueChange)=\"setBorder($event ?? 0, 'radius', 'all')\"\n            class=\"min-w-[4.5rem] ax-sm\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('all')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('all') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'all')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      } @else {\n        <div class=\"w-48\"></div>\n      }\n    </div>\n  </div>\n\n  <div\n    class=\"axp-border-radius-sides flex justify-end items-center overflow-y-hidden transition-[height] duration-300 ease-in-out\"\n    [class]=\"currentActiveRadiusSide() === 'all' ? '!h-0' : '!h-auto'\"\n    style=\"interpolate-size: allow-keywords\"\n  >\n    <div class=\"grid grid-cols-2 grid-rows-2 gap-2\">\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M14 14V9H13V13H9V14H14Z\" fill=\"currentColor\"></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n            <path d=\"M2 7H3V6.5C3 4.567 4.567 3 6.5 3H7V2H6.5C4.01472 2 2 4.01472 2 6.5V7Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M2.5 7V6.5C2.5 4.29086 4.29086 2.5 6.5 2.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-left']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 14V9H3V13H7V14H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 14V13H13V9H14V14H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 7H13V6.5C13 4.567 11.433 3 9.5 3H9V2H9.5C11.9853 2 14 4.01472 14 6.5V7Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 2V3H3V7H2V2H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 7V6.5C13.5 4.29086 11.7091 2.5 9.5 2.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['top-right']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'top-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('top-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('top-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'top-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path d=\"M14 9H13V13H9V14H14V9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M7 14V13H6.5C4.567 13 3 11.433 3 9.5V9H2V9.5C2 11.9853 4.01472 14 6.5 14H7Z\"\n              fill=\"currentColor\"\n            ></path>\n          </g>\n          <path d=\"M2.5 9V9.5C2.5 11.7091 4.29086 13.5 6.5 13.5H7\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-left']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-left')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-left')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-left') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-left')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n      <div class=\"flex gap-1 items-center\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g opacity=\"0.4\">\n            <path d=\"M2 2V7H3V3H7V2H2Z\" fill=\"currentColor\"></path>\n            <path d=\"M9 2V3H13V7H14V2H9Z\" fill=\"currentColor\"></path>\n            <path\n              d=\"M14 9H13V11.5C13 12.3284 12.3284 13 11.5 13H9V14H11.5C12.8807 14 14 12.8807 14 11.5V9Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path d=\"M7 14V13H3V9H2V14H7Z\" fill=\"currentColor\"></path>\n          </g>\n          <path d=\"M13.5 9V9.5C13.5 11.7091 11.7091 13.5 9.5 13.5H9\" stroke=\"currentColor\"></path>\n        </svg>\n        <div class=\"flex justify-start items-center max-w-24\">\n          <ax-number-box\n            class=\"ax-sm\"\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [ngModel]=\"calculatedValues().radius['bottom-right']\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'radius', 'bottom-right')\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getRadiusUnitLabel('bottom-right')\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of radiusUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getRadiusUnit('bottom-right') === u\"\n                      (onClick)=\"onRadiusUnitChange(u, 'bottom-right')\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex justify-between items-center py-1\">\n    <span class=\"text-sm font-light\">Borders</span>\n  </div>\n\n  <div class=\"border-box flex justify-between items-center gap-4\">\n    <div class=\"grid grid-cols-3 grid-rows-3 gap-1 flex-shrink-0\">\n      <!-- Top Border -->\n      <div class=\"border-box-top col-start-2 row-start-1\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"top\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V5H13V13H3V5H2V13Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 3H14V2H2V3Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Right Border -->\n      <div class=\"border-box-right col-start-3 row-start-2\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"right\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 2C2.44772 2 2 2.44772 2 3L2 13C2 13.5523 2.44772 14 3 14L11 14L11 13L3 13L3 3L11 3L11 2L3 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 2L13 14L14 14L14 2L13 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Bottom Border -->\n      <div class=\"border-box-bottom col-start-2 row-start-3\">\n        <button\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"bottom\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V11H13V3H3V11H2V3Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 13H14V14H2V13Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left Border -->\n      <div class=\"border-box-left col-start-1 row-start-2\">\n        <button (pointerdown)=\"handleActiveBorderSide($event)\" name=\"left\" class=\"p-1 hover:!bg-[var(--hover-effect)]\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              opacity=\"0.4\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M13 2C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L5 14L5 13L13 13L13 3L5 3L5 2L13 2Z\"\n              fill=\"currentColor\"\n            ></path>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 2L3 14L2 14L2 2L3 2Z\" fill=\"currentColor\"></path>\n          </svg>\n        </button>\n      </div>\n\n      <!-- All -->\n      <div class=\"border-box-all col-start-2 row-start-2\">\n        <button\n          #allBorderEl\n          (pointerdown)=\"handleActiveBorderSide($event)\"\n          name=\"all\"\n          class=\"p-1 hover:!bg-[var(--hover-effect)]\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM13 3L3 3V13H13V3Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-[auto_1fr] items-center justify-items-center gap-x-2 gap-y-2\">\n      <div class=\"text-sm font-light\">Style</div>\n      <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n        <ax-button-group-item\n          (onClick)=\"setBorder('none', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'none'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.70714 8.00004L12.3536 4.35359L11.6465 3.64648L8.00004 7.29293L4.35359 3.64648L3.64648 4.35359L7.29293 8.00004L3.64648 11.6465L4.35359 12.3536L8.00004 8.70714L11.6465 12.3536L12.3536 11.6465L8.70714 8.00004Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('solid', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'solid'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2 7.5H14\" stroke=\"currentColor\"></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dashed', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dashed'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5 7H2V8H5V7ZM11 8H12H14V7H12H11V8ZM9.5 7H6.5V8H9.5V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n        <ax-button-group-item\n          (onClick)=\"setBorder('dotted', 'style', currentActiveSide())\"\n          [selected]=\"shownStyle() === 'dotted'\"\n          ><ax-prefix\n            ><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M4 7H3V8H4V7ZM6 7H5V8H6V7ZM7 7H8V8H7V7ZM10 7H9V8H10V7ZM11 7H12V8H11V7ZM14 7H13V8H14V7Z\"\n                fill=\"currentColor\"\n              ></path></svg></ax-prefix\n        ></ax-button-group-item>\n      </ax-button-group>\n      <div class=\"contents\" [class]=\"shownStyle() === 'none' ? 'invisible' : 'visible'\">\n        <div class=\"text-sm font-light\">Width</div>\n        <div class=\"flex justify-start items-center max-w-36\">\n          <ax-number-box\n            [minValue]=\"0\"\n            [changeOnScroll]=\"true\"\n            [value]=\"shownWidth()\"\n            (onValueChanged)=\"setBorder($event.value ?? 0, 'width', currentActiveSide())\"\n            class=\"ax-sm exclude\"\n            [showSpinButtons]=\"false\"\n            ><ax-suffix>\n              <ax-dropdown-button [text]=\"getWidthUnitLabel(currentActiveSide())\" [look]=\"'blank'\" [mode]=\"'dropdown'\">\n                <ax-button-item-list>\n                  @for (u of widthUnits; track $index) {\n                    <ax-button-item\n                      [text]=\"u.toUpperCase()\"\n                      [selected]=\"getWidthUnit(currentActiveSide()) === u\"\n                      (onClick)=\"onWidthUnitChange(u, currentActiveSide())\"\n                    ></ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-button> </ax-suffix\n          ></ax-number-box>\n        </div>\n\n        <div class=\"text-sm font-light\">Color</div>\n        <div class=\"flex justify-start items-center max-w-36 overflow-hidden\">\n          <ax-color-box\n            class=\"ax-sm\"\n            [value]=\"shownColor()\"\n            (onValueChanged)=\"setBorder($event.value ?? '', 'color', currentActiveSide())\"\n          ></ax-color-box>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["axp-border-widget-edit{--ax-comp-range-slider-handler-size: .75rem;--focus-color: rgb(var(--ax-sys-color-primary-700));--hover-effect: rgb(var(--ax-sys-color-primary-500))}\n"], dependencies: [{ kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "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: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "component", type: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i1$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXColorBoxModule }, { kind: "component", type: i2$3.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBorderWidgetEditComponent, decorators: [{
             type: Component,
@@ -22315,7 +22321,7 @@ class AXPFlexOptionsWidgetEditComponent extends AXPValueWidgetComponent {
     }
     #af;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center 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=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>Align</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 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=\"grid 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=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] 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=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] 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=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"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=\"order-3\">Y:</span>\n      <div class=\"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=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"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 max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! 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=\"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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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$1.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: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: "21.2.9", type: AXPFlexOptionsWidgetEditComponent, isStandalone: true, selector: "axp-flex-options-widget-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-flex-option grid grid-cols-[auto_1fr] pt-2 gap-2 items-center 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=\"flex items-center\">\n          <ax-icon [icon]=\"item.icon\"></ax-icon>\n          <span class=\"ml-2\">{{ item.text }}</span>\n        </div>\n      </ng-template>\n    </ax-selection-list>\n  </div>\n  <span>Align</span>\n  <div class=\"flex justify-between gap-2 items-center\">\n    <div\n      class=\"relative size-[62px] bg-[rgb(30,30,30)] border border-white border-opacity-15 rounded\"\n    >\n      <div class=\"absolute inset-0 grid grid-cols-3 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=\"grid 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=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"hoveredJustify()\"\n        [style.align-items]=\"hoveredAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[1] rounded-lg bg-[rgb(30,30,30)] 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=\"absolute inset-0 flex pointer-events-none transition-all\"\n        [style.justify-content]=\"clickedJustify()\"\n        [style.align-items]=\"clickedAlign()\"\n        [style.flex-direction]=\"flexDirection()\"\n      >\n        <div class=\"flex justify-center items-center min-w-5 min-h-5\">\n          <div\n            class=\"size-auto z-[2] rounded-lg bg-[rgb(30,30,30)] 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=\"grid grid-cols-[auto_1fr] items-center justify-items-start gap-2\">\n      <span class=\"order-1\">X:</span>\n      <div class=\"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=\"order-3\">Y:</span>\n      <div class=\"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=\"flex gap-2 justify-between items-center\">\n    @if (gapMode() === 'both') {\n      <ax-range-slider\n        class=\"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 max-w-[5.5rem]\"\n        [showSpinButtons]=\"false\"\n        ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n      >\n    } @else {\n      <div class=\"flex items-center gap-2 h-12\">\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! px-1!\">PX</ax-text></ax-suffix></ax-number-box\n        >\n        <span class=\"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 min-w-5\"\n          [showSpinButtons]=\"false\"\n          ><ax-suffix><ax-text class=\"text-xs! 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=\"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$j.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i1$j.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { 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$1.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: i3$4.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$7.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: "21.2.9", ngImport: i0, type: AXPFlexOptionsWidgetEditComponent, decorators: [{
             type: Component,
@@ -30037,7 +30043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const AXP_WIDGET_AI_AGENT_FORM_LAYOUT = 'widget-form-layout';
 const AXP_WIDGET_AI_AGENT_CHART_LAYOUT = 'widget-chart-layout';
 /** Assist/conversation chip rows — only `flex-layout` + `button-action` catalog rows. */
-const AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT = 'widget-follow-up-chips-layout';
+const AXP_WIDGET_AI_AGENT_ASSIST_FOLLOW_UP_CHIPS_LAYOUT = 'follow-up-prompt-generator';
 const AXP_WIDGET_AI_AGENT_NAMES = [
     AXP_WIDGET_AI_AGENT_FORM_LAYOUT,
     AXP_WIDGET_AI_AGENT_CHART_LAYOUT,