@acorex-platform/framework-client 0.0.14 → 0.0.18

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

@@ -13372,15 +13372,19 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         this.isInteracting = signal(false, ...(ngDevMode ? [{ debugName: "isInteracting" }] : /* istanbul ignore next */ []));
         this.showEmptyHint = computed(() => this.showOverlay() && !this.hasSignature(), ...(ngDevMode ? [{ debugName: "showEmptyHint" }] : /* istanbul ignore next */ []));
         this.showDialogHint = computed(() => !this.showOverlay() && !this.hasSignature() && !this.isInteracting(), ...(ngDevMode ? [{ debugName: "showDialogHint" }] : /* istanbul ignore next */ []));
-        this.showDesktopHover = computed(() => this.showOverlay() && !this.deviceService.isTouchScreen() && !this.disabled(), ...(ngDevMode ? [{ debugName: "showDesktopHover" }] : /* istanbul ignore next */ []));
+        this.showDesktopHover = computed(() => this.showOverlay() &&
+            !this.deviceService.isTouchScreen() &&
+            !this.disabled(), ...(ngDevMode ? [{ debugName: "showDesktopHover" }] : /* istanbul ignore next */ []));
         this.hovering = signal(false, ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
         this.emptyHint = computed(() => {
             const placeholder = this.options()['placeholder']?.trim();
-            return placeholder || '@platform-layout-widgets:widgets.signature.empty-state.hint';
+            return (placeholder ||
+                '@platform-layout-widgets:widgets.signature.empty-state.hint');
         }, ...(ngDevMode ? [{ debugName: "emptyHint" }] : /* istanbul ignore next */ []));
         this.signHereHint = computed(() => {
             const placeholder = this.options()['placeholder']?.trim();
-            return placeholder || '@platform-layout-widgets:widgets.signature.empty-state.sign-here';
+            return (placeholder ||
+                '@platform-layout-widgets:widgets.signature.empty-state.sign-here');
         }, ...(ngDevMode ? [{ debugName: "signHereHint" }] : /* istanbul ignore next */ []));
         this.paintContainer = viewChild('paintContainer', ...(ngDevMode ? [{ debugName: "paintContainer" }] : /* istanbul ignore next */ []));
         this.paintView = viewChild('paintView', ...(ngDevMode ? [{ debugName: "paintView" }] : /* istanbul ignore next */ []));
@@ -13478,13 +13482,19 @@ class AXPSignatureWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image [src]=\"getValue()!\" class=\"block w-full min-h-[9rem] object-contain\" />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-20 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: AXPaintModule }, { kind: "component", type: i2$9.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$9.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSignatureWidgetEditComponent, isStandalone: true, selector: "axp-signature-pad-widget-edit", host: { classAttribute: "block w-full" }, viewQueries: [{ propertyName: "paintContainer", first: true, predicate: ["paintContainer"], descendants: true, isSignal: true }, { propertyName: "paintView", first: true, predicate: ["paintView"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image\n        [src]=\"getValue()!\"\n        class=\"block w-full min-h-[9rem] object-contain\"\n      />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-5 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: AXPaintModule }, { kind: "component", type: i2$9.AXPaintContainerComponent, selector: "ax-paint-container", inputs: ["look", "disabled", "editMode"] }, { kind: "component", type: i2$9.AXPaintViewComponent, selector: "ax-paint-view", inputs: ["paintBackgroundColor"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i1$e.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSignatureWidgetEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-signature-pad-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'block w-full',
-                    }, imports: [FormsModule, AXPaintModule, AXImageModule, AXTranslationModule, AsyncPipe], template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image [src]=\"getValue()!\" class=\"block w-full min-h-[9rem] object-contain\" />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-20 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, imports: [
+                        FormsModule,
+                        AXPaintModule,
+                        AXImageModule,
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], template: "<div class=\"axp-signature-pad-widget-edit block w-full select-none\">\n  <div\n    class=\"relative w-full min-h-[9rem] overflow-hidden rounded-md\"\n    [class.cursor-pointer]=\"showOverlay() && !disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (click)=\"handleSurfaceClick($event)\"\n    (pointerdown)=\"handleSurfacePointerDown($event)\"\n  >\n    @if (showSignaturePreview()) {\n      <ax-image\n        [src]=\"getValue()!\"\n        class=\"block w-full min-h-[9rem] object-contain\"\n      />\n    } @else if (showPaintSurface()) {\n      <ax-paint-container\n        look=\"none\"\n        [editMode]=\"editMode()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event)\"\n        class=\"__paint\"\n        #paintContainer\n      >\n        <ax-paint-view #paintView paintBackgroundColor=\"white\"></ax-paint-view>\n      </ax-paint-container>\n    }\n\n    @if (showEmptyHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 pointer-events-none\"\n      >\n        <i class=\"fa-light fa-file-signature text-2xl\"></i>\n        <span class=\"text-sm\">{{ emptyHint() | translate | async }}</span>\n      </div>\n    }\n\n    @if (showDialogHint()) {\n      <div\n        class=\"absolute inset-0 z-5 flex items-center justify-center pointer-events-none text-sm opacity-60\"\n      >\n        {{ signHereHint() | translate | async }}\n      </div>\n    }\n\n    @if (showDesktopHover()) {\n      <div\n        class=\"absolute inset-0 z-5 flex cursor-pointer items-center justify-center bg-neutral-900/50 text-neutral-100 transition-opacity duration-400\"\n        data-signature-action=\"true\"\n        [style.opacity]=\"hovering() ? 1 : 0\"\n        (click)=\"handleOverlayClick($event)\"\n      >\n        <i class=\"fa-light fa-pen\"></i>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-signature-pad-widget-edit .__paint{display:block;width:100%;min-height:9rem}.axp-signature-pad-widget-edit ax-paint-container{display:block;width:100%}.axp-signature-pad-widget-edit ax-paint-container .main-toolbar,.axp-signature-pad-widget-edit ax-paint-container .secondary-toolbar{display:none}:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-container>.editor-container,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view,:host ::ng-deep .axp-signature-pad-widget-edit ax-paint-view .canvas-element{border:none!important;box-shadow:none!important;outline:none!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { paintContainer: [{ type: i0.ViewChild, args: ['paintContainer', { isSignal: true }] }], paintView: [{ type: i0.ViewChild, args: ['paintView', { isSignal: true }] }] } });
 
 var signaturePadWidgetEdit_component = /*#__PURE__*/Object.freeze({
@@ -14459,12 +14469,35 @@ class AXPStatusWidgetViewComponent extends AXPDataListWidgetComponent {
         // Could show a toast notification here if needed
     }
     /**
-     * Get entity data for command execution context
+     * Build context for default `Entity:UpdateStatus` (entity key, record id, status field path).
      */
     getEntityData() {
-        // Return first selected item if available
-        const items = this.selectedItems();
-        return items?.[0] ?? null;
+        const opts = this.options();
+        const entityKey = (opts['entityName'] ?? opts['entity']);
+        const statusField = (opts['statusField'] ?? opts['fieldName'] ?? this.path);
+        const parentPath = this.parentPath();
+        const idPathCandidates = [
+            parentPath ? `${parentPath}.id` : null,
+            'id',
+            parentPath ? `${parentPath}._id` : null,
+            '_id',
+        ].filter((p) => !!p);
+        let id;
+        for (const p of idPathCandidates) {
+            id = this.contextService.getValue(p);
+            if (id != null && String(id).length > 0) {
+                break;
+            }
+        }
+        if (!entityKey || id == null || String(id).length === 0) {
+            return null;
+        }
+        return {
+            entity: entityKey,
+            entityName: entityKey,
+            statusField: statusField ?? 'statusId',
+            id: String(id),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStatusWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXPStatusWidgetViewComponent, isStandalone: true, selector: "axp-status-widget-view", viewQueries: [{ propertyName: "statusChip", first: true, predicate: AXPStatusChipComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
@@ -16564,11 +16597,11 @@ class AXPFieldsetWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFieldsetWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{margin:0;width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 0))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFieldsetWidgetViewComponent, isStandalone: true, selector: "axp-fieldset-widget-view", usesInheritance: true, ngImport: i0, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 0))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { 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: AXPFieldsetWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{margin:0;width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 0))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'axp-fieldset-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXPWidgetCoreModule, AXTranslationModule], standalone: true, template: "@switch (look()) {\n  <!-- fieldset Style -->\n  @case ('fieldset') {\n    <fieldset class=\"fieldset\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\" (click)=\"toggleCollapse()\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          {{ title() | translate | async }}\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Card Style -->\n  @case ('card') {\n    <div class=\"card\">\n      @if (shouldShowTitle()) {\n        <div class=\"legend\" (click)=\"toggleCollapse()\">\n          <div class=\"caption\">\n            @if (icon()) {\n              <i [class]=\"icon()\" class=\"text-md\"></i>\n            }\n            <div class=\"text-content\">\n              <h3 class=\"title\">{{ title() | translate | async }}</h3>\n              @if (description()) {\n                <p class=\"description\">{{ description() | translate | async }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"icon\" [ngClass]=\"{ 'transform rotate-180': isOpen() }\">\n            @if (collapsible()) {\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n  <!-- Group Line style -->\n  @case ('group') {\n    <fieldset class=\"group\">\n      @if (shouldShowTitle()) {\n        <legend class=\"legend\">\n          @if (icon()) {\n            <i [class]=\"icon()\" class=\"text-sm\"></i>\n          }\n          <h3 class=\"title\">{{ title() | translate | async }}</h3>\n          <div class=\"title-line\"></div>\n        </legend>\n      }\n      @if (!collapsible() || isOpen()) {\n        <div class=\"content\" [style.grid-template-columns]=\"'repeat(' + cols() + ', 1fr)'\">\n          @if (description()) {\n            <p class=\"description\" [style.grid-column]=\"'1 / -1'\">\n              {{ description() | translate | async }}\n            </p>\n          }\n          <!-- render widgets -->\n          @for (node of children(); track $index) {\n            <ng-container\n              axp-widget-renderer\n              [node]=\"node\"\n              [index]=\"index\"\n              [parentNode]=\"this\"\n              [mode]=\"node.mode ?? this.mode\"\n            ></ng-container>\n          }\n        </div>\n      }\n    </fieldset>\n  }\n  <!-- Container Style -->\n  @case ('container') {\n    <div class=\"container\">\n      @for (node of children(); track $index) {\n        <ng-container\n          axp-widget-renderer\n          [node]=\"node\"\n          [index]=\"index\"\n          [parentNode]=\"this\"\n          [mode]=\"node.mode ?? this.mode\"\n        ></ng-container>\n      }\n    </div>\n  }\n  <!-- End of switch-->\n}\n", styles: ["@layer properties;:host{display:block;height:100%;width:100%}:host>.fieldset{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.fieldset>.legend{display:inline-flex;min-width:0;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.fieldset>.legend .title{margin:0;flex-shrink:0;padding:0;white-space:nowrap}:host>.fieldset>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.fieldset>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.group{padding:0}:host>.group>.legend{margin-bottom:calc(var(--spacing, .25rem) * 4);display:flex;width:100%;flex-direction:column;gap:var(--spacing, .25rem);padding:0}:host>.group>.legend .title{width:fit-content;padding:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap}:host>.group>.legend .title-line{margin-top:var(--spacing, .25rem);height:1px;width:100%;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 0))}:host>.group>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4)}:host>.group>.content .description{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 6);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:65%}:host>.card{height:100%;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host>.card>.legend{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 2.5)}:host>.card>.legend .caption{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:host>.card>.legend .caption .title{width:fit-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>.card>.legend .caption .description{width:100%;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:65%}:host>.card>.legend .caption .icon{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:host>.card>.content{display:grid;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-md, .375rem);border-bottom-left-radius:var(--radius-md, .375rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 5)}:host>.container{display:grid;gap:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var fieldsetWidgetView_component = /*#__PURE__*/Object.freeze({
@@ -19481,7 +19514,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/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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: i2$4.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$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$1.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{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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: i2$4.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXNumberBoxModule }, { kind: "component", type: i1$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$1.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,
@@ -19496,7 +19529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXRangeSliderModule,
                         AXSelectionListModule,
                         FormsModule,
-                    ], 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/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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{gap:var(--spacing, .25rem);overflow:auto;padding-bottom:calc(var(--spacing, .25rem) * 2);flex-wrap:nowrap}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var gridOptionsWidgetEditor_component = /*#__PURE__*/Object.freeze({
@@ -21471,7 +21504,7 @@ class AXPSpacingWidgetEditComponent extends AXPValueWidgetComponent {
         return { clientX: touch.clientX, clientY: touch.clientY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\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        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\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              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$2.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSpacingWidgetEditComponent, isStandalone: true, selector: "axp-spacing-widget-editor", viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\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        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\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              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\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: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXRangeSliderModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6$2.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpacingWidgetEditComponent, decorators: [{
             type: Component,
@@ -21488,7 +21521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXKBDItemComponent,
                         AXNumberBoxModule,
                         AXDecoratorModule,
-                    ], template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\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        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\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              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: [".axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{transform:scale(1.2);position:relative;display:grid;width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none;cursor:default;-webkit-user-select:none;user-select:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;border:none;outline:0px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);background:transparent;box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{cursor:default;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;display:flex;color:var(--color-text-secondary);background:transparent;padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;align-items:center;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{border-radius:4px;grid-area:1/1/-1/-1;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{border-radius:4px;grid-area:3/3/span 3/span 3;display:grid;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;justify-items:center;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3/3/span 3/span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1/1/-1/-1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;align-items:center;gap:8px;width:241px;padding:8px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px;gap:4px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;overflow:hidden;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{height:10px;background:#ccc;border-radius:12px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{height:10px;width:10px;background-color:#fff;border-radius:50%;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{grid-area:1/1/-1/-1;overflow:hidden;border-radius:2px;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"axp-spacing-box flex justify-center items-center pt-4 pb-2\">\n  <div class=\"axp-spacing-inner-box\">\n    <div class=\"axp-spacing-margin-box\">\n      <!--MARGIN SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"224\"\n        height=\"112\"\n        class=\"area\"\n      >\n        <mask id=\"margin-mask\" width=\"224\" height=\"112\">\n          <rect fill=\"#000\" height=\"112\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"112\" rx=\"4\" width=\"224\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"66\" rx=\"4\" width=\"154\" x=\"35\" y=\"23\"></rect>\n        </mask>\n        <defs>\n          <linearGradient id=\"FuseLinearGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"white\"></stop>\n            <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"></stop>\n          </linearGradient>\n        </defs>\n\n        <!--MARGIN TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'top')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"url(#FuseLinearGradient)\"\n              d=\"\n  m0,0\n  h224\n  l-36,24\n  h-152\n  l-36,-24z\n  \"\n              fill-opacity=\"0.02\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'right')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m224,0\n  v112\n  l-36,-24\n  v-64\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,112\n  h224\n  l-36,-24\n  h-152\n  l-36,24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n        <!--MARGIN LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'margin', 'left')\"\n          (mousedown)=\"listenToMove($event, 'margin', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              mask=\"url(#margin-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v112\n  l36,-24\n  v-64\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#margin-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--MARGIN TOP VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            calculatedValues().margin.top + ' ' + units().margin.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN RIGHT VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            calculatedValues().margin.right + ' ' + units().margin.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN BOTTOM VALUE-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            calculatedValues().margin.bottom + ' ' + units().margin.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--MARGIN LEFT VALUE-->\n      <div\n        tabindex=\"0\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n        class=\"axp-spacing-value-container\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            calculatedValues().margin.left + ' ' + units().margin.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"axp-spacing-padding-box\">\n      <!--SVG DEFINE-->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"150\"\n        height=\"62\"\n        class=\"area\"\n      >\n        <mask id=\"padding-mask\" width=\"150\" height=\"62\">\n          <rect fill=\"#000\" height=\"60\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#fff\" height=\"60\" rx=\"2\" width=\"150\" x=\"0\" y=\"0\"></rect>\n          <rect fill=\"#000\" height=\"14\" rx=\"2\" width=\"80\" x=\"35\" y=\"23\"></rect>\n        </mask>\n\n        <!--PADDING TOP SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'top')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'top')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  h150\n  l-36,24\n  h-78\n  l-36,-24z\n  \"\n              fill-opacity=\"0.064\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING RIGHT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'right')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'right')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m150,0\n  v60\n  l-36,-24\n  v-12\n  l36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING BOTTOM SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'bottom')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'bottom')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,60\n  h150\n  l-36,-24\n  h-78\n  l-36,24z\n  \"\n              fill-opacity=\"0.12\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n\n        <!--PADDING LEFT SVG-->\n        <g\n          class=\"hover:brightness-75\"\n          style=\"cursor: s-resize\"\n          (click)=\"openPopUp($event, 'padding', 'left')\"\n          (mousedown)=\"listenToMove($event, 'padding', 'left')\"\n        >\n          <g>\n            <path\n              mode=\"delta\"\n              fill=\"var(--color-background-1)\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              mask=\"url(#padding-mask)\"\n            ></path>\n            <path\n              mode=\"delta\"\n              fill=\"white\"\n              d=\"\n  m0,0\n  v60\n  l36,-24\n  v-12\n  l-36,-24z\n  \"\n              fill-opacity=\"0.094\"\n              mask=\"url(#padding-mask)\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n\n      <!--PADDING TOP SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 1 / 2 / 2 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 1 / 2 / 2 / 3\">\n          <span>{{\n            this.calculatedValues().padding.top + ' ' + units().padding.top\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING RIGHT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 3 / 3 / 4\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 3 / 3 / 4\">\n          <span>{{\n            this.calculatedValues().padding.right + ' ' + units().padding.right\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING BOTTOM SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 3 / 2 / 4 / 3\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 3 / 2 / 4 / 3\">\n          <span>{{\n            this.calculatedValues().padding.bottom +\n              ' ' +\n              units().padding.bottom\n          }}</span>\n        </div>\n      </div>\n\n      <!--PADDING LEFT SVG-->\n      <div\n        tabindex=\"0\"\n        class=\"axp-spacing-value-container\"\n        style=\"grid-area: 2 / 1 / 3 / 2\"\n      >\n        <div class=\"axp-spacing-value-field\" style=\"grid-area: 2 / 1 / 3 / 2\">\n          <span>{{\n            this.calculatedValues().padding.left + ' ' + units().padding.left\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!--PADDING TEXT-->\n    <svg\n      class=\"axp-spacing-padding-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        PADDING\n      </text>\n    </svg>\n\n    <!--MARGIN TEXT-->\n    <svg\n      class=\"axp-spacing-margin-text\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <text x=\"5\" y=\"10\" fill=\"white\" font-weight=\"500\" font-size=\"7\">\n        MARGIN\n      </text>\n    </svg>\n\n    <!-- Ctrl hint -->\n    <!-- <div class=\"text-xs text-center text-neutral-400 mt-1\">\n      Hold Ctrl while dragging to adjust all sides\n    </div> -->\n  </div>\n</div>\n\n<ng-template #template let-type=\"type\" let-side=\"side\" let-value=\"value\">\n  <div\n    class=\"axp-spacing-popup-container\"\n    (keydown.control.b)=\"\n      setSpacing(\n        originalValues()[this.current().type][this.current().side],\n        type,\n        side\n      )\n    \"\n  >\n    <div class=\"axp-spacing-popover\">\n      <!--SET EMPTY-->\n      <div class=\"size-4 cursor-pointer\" (click)=\"setSpacing(0, type, side)\">\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        >\n          <path\n            opacity=\"0.4\"\n            d=\"M14 2L14 13L10 13L10 2L14 2Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"0.67\"\n          ></path>\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M7.99995 7L7.99995 1H8.99995L8.99995 14H7.99995L7.99995 8L3.70706 8L5.85351 10.1464L5.1464 10.8536L1.79285 7.5L5.1464 4.14645L5.85351 4.85355L3.70706 7L7.99995 7Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </div>\n\n      <div class=\"flex justify-center h-6 flex-col\">\n        <input\n          type=\"range\"\n          name=\"range\"\n          [min]=\"0\"\n          [max]=\"200\"\n          [value]=\"\n            this.calculatedValues()[this.current().type][this.current().side]\n          \"\n          (input)=\"setSpacing($event, type, side)\"\n        />\n      </div>\n      <div>\n        <!--INPUT NUMBER-->\n        <div style=\"--local-gap: 8px\">\n          <div\n            style=\"\n              gap: 8px;\n              height: auto;\n              display: flex;\n              flex-flow: column;\n              -webkit-box-align: stretch;\n              align-items: stretch;\n              -webkit-box-pack: start;\n              position: relative;\n              justify-content: stretch;\n              width: 100%;\n              -webkit-box-flex: 1;\n              flex-grow: 1;\n            \"\n          >\n            <ax-number-box\n              class=\"ax-sm\"\n              [minValue]=\"0\"\n              [changeOnScroll]=\"true\"\n              [ngModel]=\"value\"\n              (onValueChanged)=\"setSpacing($event.value ?? 0, type, side)\"\n              [showSpinButtons]=\"false\"\n            >\n              <ax-suffix>\n                <ax-dropdown-button\n                  [text]=\"getSpacingUnitLabel(type, side)\"\n                  [look]=\"'blank'\"\n                  [mode]=\"'dropdown'\"\n                >\n                  <ax-button-item-list>\n                    @for (u of spacingUnits; track $index) {\n                      <ax-button-item\n                        [text]=\"u.toUpperCase()\"\n                        [selected]=\"getSpacingUnit(type, side) === u\"\n                        (onClick)=\"onSpacingUnitChange(u, type, side)\"\n                      ></ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </ax-dropdown-button>\n              </ax-suffix>\n            </ax-number-box>\n          </div>\n        </div>\n      </div>\n      <div class=\"axp-spacing-template-values\">\n        @for (i of FixedValues; track $index) {\n          <div\n            (click)=\"setSpacing(i.value, type, side)\"\n            class=\"hover:!bg-gradient-to-b hover:!from-white/20 hover:!to-white/5 cursor-pointer!\"\n            [class]=\"i.colspan ? 'col-span-' + i.colspan : ''\"\n            [class]=\"i.rowspan ? 'row-span-' + i.rowspan : ''\"\n            tabindex=\"0\"\n            style=\"\n              border-bottom-color: var(--color-border-1);\n              border-left-color: var(--color-border-1);\n              border-right-color: var(--color-border-1);\n              border-top-color: var(--color-border-1);\n              outline: 0px;\n              cursor: default;\n              user-select: none;\n              padding: 0px;\n              box-sizing: border-box;\n              font-family: inherit;\n              font-size: inherit;\n              --component-icon-color: var(--color-text-secondary);\n              position: relative;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              height: 100%;\n              border-radius: 4px;\n              color: var(--color-action-secondary-text);\n              background: var(--color-action-secondary-background);\n              border-width: 0px;\n              border-style: solid;\n              box-shadow: var(--box-shadows-action-secondary);\n              align-self: center;\n            \"\n          >\n            <div class=\"truncate\">\n              {{ i.label }}\n              <span class=\"text-xs text-neutral-400\">\n                {{ units()[this.current().type][this.current().side] }}</span\n              >\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"h-[1px] mt-1 mb-1 bg-border-1 pointer-events-none\"></div>\n\n    <div\n      [class.opacity-50]=\"\n        originalValues()[this.current().type][this.current().side] ===\n        calculatedValues()[this.current().type][this.current().side]\n      \"\n      (click)=\"\n        setSpacing(\n          originalValues()[this.current().type][this.current().side],\n          type,\n          side\n        )\n      \"\n      tabindex=\"0\"\n      class=\"outline-none select-none py-1 px-2 my-1 min-h-6 cursor-pointer hover:!bg-[#404040]\"\n    >\n      <div class=\"flex flex-row items-center\">\n        <div class=\"min-w-6 self-center grow basis-0\">\n          <div\n            class=\"items-center box-border grid grid-cols-[16px_1fr_auto] gap-x-2 gap-y-1\"\n          >\n            <div class=\"size-4\">\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              >\n                <path\n                  d=\"M3.70712 5.00004L6.35357 2.35359L5.64646 1.64648L1.79291 5.50004L5.64646 9.35359L6.35357 8.64648L3.70712 6.00004H10C11.6569 6.00004 13 7.34318 13 9.00004C13 10.6569 11.6569 12 10 12H8.00001V13H10C12.2092 13 14 11.2092 14 9.00004C14 6.7909 12.2092 5.00004 10 5.00004H3.70712Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            </div>\n            <div>Reset</div>\n          </div>\n        </div>\n        <div class=\"self-center\">\n          <div\n            class=\"cursor-default select-none text-[11.5px] font-normal leading-4 tracking-tight text-secondary justify-self-end ml-[1px]\"\n          >\n            <ax-kbd look=\"blank\">\n              <ax-kbd-item [keys]=\"toggleShortcutKeys\"></ax-kbd-item>\n            </ax-kbd>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ax-popover #popover [openOn]=\"'click'\" [offsetY]=\"10\" [closeOn]=\"'clickOut'\">\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n      type: this.current().type,\n      side: this.current().side,\n      value: this.calculatedValues()[this.current().type][this.current().side],\n    }\"\n  ></ng-container>\n</ax-popover>\n", styles: ["@layer properties;.axp-spacing-box{--color-text-secondary: rgba(255, 255, 255, .67);--color-ui-scrollbar-thumb: rgba(255, 255, 255, .67);--color-background-1: #292929;--color-text-secondary: white;--color-border-2: rgba(255, 255, 255, .16);--color-changed: rgb(167, 209, 255);--color-background: rgba(0, 106, 204, .18)}.axp-spacing-box .axp-spacing-inner-box{position:relative;display:grid;cursor:default;-webkit-user-select:none;user-select:none;transform:scale(1.2);width:224px;height:112px;grid-template-columns:36px 1px 36px 1fr 36px 1px 36px;grid-template-rows:24px 2px 24px 1fr 24px 2px 24px;outline-style:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container{pointer-events:none;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;-webkit-user-select:none;user-select:none;outline:0;cursor:default;place-self:center;padding:2px;height:auto;width:auto;font-family:inherit;font-size:inherit;position:relative;border-radius:4px;color:var(--color-text-secondary);box-sizing:border-box;box-shadow:none}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-value-container .axp-spacing-value-field{display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:transparent;-webkit-user-select:none;user-select:none;cursor:default;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.115px;color:var(--color-text-secondary);padding:2px;margin:0;border-radius:2px;max-width:100%;box-sizing:content-box;place-self:center;position:relative;opacity:1;justify-content:center}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-box{display:grid;justify-items:center;border-radius:4px;grid-area:1 / 1 / -1 / -1;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:224px;height:112px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-box{display:grid;justify-items:center;border-radius:4px;grid-area:3 / 3 / span 3 / span 3;grid-template-columns:36px 1fr 36px;grid-template-rows:24px minmax(8px,1fr) 24px;width:150px;height:60px}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-padding-text{grid-area:3 / 3 / span 3 / span 3;pointer-events:none;position:relative}.axp-spacing-box .axp-spacing-inner-box .axp-spacing-margin-text{grid-area:1 / 1 / -1 / -1;pointer-events:none;position:relative}.axp-spacing-popup-container{--color-action-secondary-text: white;--color-action-secondary-background: linear-gradient( 180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .11) 100% );--box-shadows-action-secondary: 0px .5px 1px rgba(0, 0, 0, .8), inset 0px .5px .5px rgba(255, 255, 255, .12);--color-border-1: rgba(255, 255, 255, .13);max-width:239px;min-width:201px;background:#353535;border-radius:.5rem;color:var(--color-text-secondary, white);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,sans-serif;font-size:11.5px;line-height:16px}.axp-spacing-popup-container .axp-spacing-popover{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);grid-template-columns:16px 1fr 56px;grid-template-rows:24px 1fr;width:241px}.axp-spacing-popup-container .axp-spacing-popover .axp-spacing-template-values{display:grid;gap:var(--spacing, .25rem);grid-area:2 / 1 / 3 / -1;grid-template-columns:repeat(5,1fr);grid-template-rows:24px 24px}.axp-spacing-popup-container .axp-spacing-popover input[type=range]{width:100%;cursor:pointer;overflow:hidden;border-radius:var(--radius-xl, .75rem);-webkit-appearance:none;appearance:none;outline:none}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-track{border-radius:var(--radius-xl, .75rem);height:10px;background:#ccc}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-webkit-slider-thumb{border-radius:calc(infinity * 1px);-webkit-appearance:none;appearance:none;height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.axp-spacing-popup-container .axp-spacing-popover input[type=range]::-moz-range-thumb{border-radius:calc(infinity * 1px);height:10px;width:10px;background-color:#fff;border:1px solid #353535;box-shadow:-407px 0 0 400px #29292970}.area{overflow:hidden;border-radius:var(--radius-sm, .25rem);grid-area:1 / 1 / -1 / -1;filter:drop-shadow(rgba(255,255,255,.2) 0px -.5px 0px) drop-shadow(rgba(0,0,0,.4) 0px 0px 1px) drop-shadow(rgba(0,0,0,.2) 0px 1px 0px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }] } });
 
 var spacingWidgetEditor_component = /*#__PURE__*/Object.freeze({